Chuyển đổi đối tượng thành chuỗi JSON với JSON.stringify() trong JavaScript

Trong quá trình phát triển ứng dụng web, việc trao đổi và lưu trữ dữ liệu giữa client và server là một nhu cầu thiết yếu. JSON (JavaScript Object Notation) là định dạng phổ biến và linh hoạt được sử dụng rộng rãi để biểu diễn và truyền dữ liệu nhờ cú pháp đơn giản, dễ đọc, dễ phân tích.

Trong JavaScript, để chuyển đổi một đối tượng (object) thành chuỗi JSON – phục vụ cho việc gửi dữ liệu lên server, lưu vào LocalStorage, hoặc hiển thị ra giao diện – ta sử dụng phương thức JSON.stringify(). Phương thức này giúp “đóng gói” dữ liệu một cách an toàn và đúng chuẩn, từ đó tạo điều kiện thuận lợi cho việc xử lý và chia sẻ thông tin trong ứng dụng web.

Trong bài viết này, mình sẽ cùng tìm hiểu chi tiết về cú pháp, cách sử dụng, các tùy chọn nâng cao của JSON.stringify(), cũng như những lưu ý quan trọng khi áp dụng trong thực tế.

JSON.stringify() là gì?

Định nghĩa

JSON.stringify() là một phương thức có sẵn trong JavaScript, dùng để chuyển đổi một giá trị JavaScript (thường là đối tượng, mảng, hoặc kiểu dữ liệu đơn giản) thành chuỗi JSON hợp lệ.

Cú pháp cơ bản:

JSON.stringify(value[, replacer[, space]]);

Mục đích sử dụng

Phương thức này rất hữu ích trong các tình huống sau:

• Truyền dữ liệu từ phía client lên server: Chuỗi JSON có thể dễ dàng gửi qua API hoặc AJAX.

• Lưu trữ dữ liệu vào localStorage/sessionStorage: Vì hai bộ nhớ này chỉ lưu được chuỗi, nên cần stringify trước khi lưu.

• Hiển thị dữ liệu ra giao diện: Dễ dàng in ra chuỗi JSON có định dạng.

• Chuyển đổi để gửi qua WebSocket hoặc lưu trữ tạm thời.

Hoạt động ngược với JSON.parse()

Nếu như JSON.parse() dùng để phân tích chuỗi JSON và biến nó thành đối tượng JavaScript, thì JSON.stringify() là phương thức ngược lại – nó nhận một đối tượng JavaScript và trả về chuỗi JSON tương ứng.

Ví dụ đơn giản:

const user = { name: "Alice", age: 25 };
const jsonStr = JSON.stringify(user);
console.log(jsonStr); // Kết quả: '{"name":"Alice","age":25}'

Nhờ tính đối xứng này giữa JSON.stringify() và JSON.parse(), chúng ta có thể dễ dàng chuyển đổi qua lại giữa đối tượng và chuỗi JSON khi xử lý dữ liệu trong ứng dụng JavaScript.

Cú pháp của JSON.stringify() trong JavaScript

Cú pháp đầy đủ của phương thức JSON.stringify() như sau:

JSON.stringify(value[, replacer[, space]])

value (bắt buộc)

• Đây là giá trị cần được chuyển đổi sang chuỗi JSON.

• Thường là một đối tượng, mảng, hoặc giá trị nguyên thủy như số, chuỗi, boolean,...

• Nếu value là undefined, một function hoặc symbol – kết quả sẽ là undefined hoặc các giá trị đó sẽ bị bỏ qua trong kết quả JSON.

Ví dụ:

const obj = { name: "Alice", age: 25 };
const jsonStr = JSON.stringify(obj);
console.log(jsonStr); // '{"name":"Alice","age":25}'

replacer (tùy chọn)

• Dùng để tùy chỉnh hoặc lọc thuộc tính khi chuyển đối tượng sang chuỗi JSON.

• Có thể là:

  • Hàm: Nhận từng cặp key – value, cho phép biến đổi giá trị trước khi đưa vào chuỗi.

  • Mảng: Chỉ định danh sách các key sẽ được giữ lại trong kết quả JSON.

Ví dụ dùng hàm replacer:

const obj = { name: "Alice", age: 25, password: "secret" };

const jsonStr = JSON.stringify(obj, (key, value) => {
  if (key === "password") return undefined; // Ẩn mật khẩu
  return value;
});

console.log(jsonStr); // '{"name":"Alice","age":25}'

Ví dụ dùng mảng replacer:

const obj = { name: "Alice", age: 25, gender: "female" };

const jsonStr = JSON.stringify(obj, ["name", "gender"]);
console.log(jsonStr); // '{"name":"Alice","gender":"female"}'

space (tùy chọn)

• Dùng để làm đẹp chuỗi JSON với định dạng dễ đọc (pretty-print).

• Là một số (số lượng khoảng trắng dùng để thụt lề) hoặc một chuỗi (ví dụ: \t để dùng tab).

• Rất hữu ích khi cần hiển thị chuỗi JSON cho người dùng hoặc lưu vào file.

Ví dụ dùng space:

const obj = { name: "Alice", age: 25 };

const prettyJson = JSON.stringify(obj, null, 2);
console.log(prettyJson);

/* Kết quả:
{
  "name": "Alice",
  "age": 25
}
*/

Cách sử dụng JSON.stringify() cơ bản trong JavaScript

Phương thức JSON.stringify() giúp chuyển đổi các giá trị trong JavaScript thành chuỗi JSON hợp lệ. Dưới đây là các tình huống sử dụng phổ biến:

Chuyển Object thành chuỗi JSON

Đối tượng (object) là kiểu dữ liệu rất thường gặp khi cần truyền tải hoặc lưu trữ thông tin. Với JSON.stringify(), ta có thể dễ dàng chuyển nó thành chuỗi JSON.

Ví dụ:

const user = {
  name: "Alice",
  age: 25,
  isStudent: false
};

const jsonStr = JSON.stringify(user);
console.log(jsonStr);
// Kết quả: '{"name":"Alice","age":25,"isStudent":false}'

Chuyển Array thành chuỗi JSON

Mảng trong JavaScript cũng được hỗ trợ chuyển đổi sang JSON một cách trực tiếp.

Ví dụ:

const skills = ["HTML", "CSS", "JavaScript"];

const jsonArr = JSON.stringify(skills);
console.log(jsonArr);
// Kết quả: '["HTML","CSS","JavaScript"]'

Chuyển Object lồng nhau (Nested Object)

JSON.stringify() hỗ trợ xử lý đệ quy với các object lồng nhau nhiều cấp.

Ví dụ:

const student = {
  name: "Bob",
  age: 22,
  contact: {
    email: "[email protected]",
    phone: "0123456789"
  }
};

const jsonStr = JSON.stringify(student, null, 2);
console.log(jsonStr);
/* Kết quả:
{
  "name": "Bob",
  "age": 22,
  "contact": {
    "email": "[email protected]",
    "phone": "0123456789"
  }
}
*/

Bỏ qua thuộc tính không hợp lệ (function, undefined, symbol)

Một số kiểu dữ liệu không hợp lệ trong JSON như function, undefined, symbol sẽ bị loại bỏ khi dùng JSON.stringify().

Ví dụ:

const data = {
  name: "Charlie",
  greet: function() { return "Hello"; },
  age: undefined,
  id: Symbol("id")
};

const jsonStr = JSON.stringify(data);
console.log(jsonStr);
// Kết quả: '{"name":"Charlie"}'

Như bạn thấy, chỉ có "name" được giữ lại, còn greet, age, id đã bị loại bỏ vì không thể biểu diễn trong JSON.

Sử dụng replacer và space trong JSON.stringify() trong JavaScript

Phương thức JSON.stringify() có hai tham số tùy chọn mạnh mẽ là replacer và space, giúp lọc dữ liệu và tăng khả năng đọc của chuỗi JSON.

Replacer là mảng – chỉ định các thuộc tính được giữ lại

Khi replacer là một mảng (array), chỉ những key được liệt kê trong mảng mới được đưa vào chuỗi JSON.

Ví dụ:

const user = {
  name: "Alice",
  age: 25,
  email: "[email protected]",
  isAdmin: true
};

const jsonStr = JSON.stringify(user, ["name", "email"]);
console.log(jsonStr);
// Kết quả: '{"name":"Alice","email":"[email protected]"}'

Chỉ các thuộc tính "name" và "email" được giữ lại.

Replacer là hàm – biến đổi giá trị khi chuyển đổi

Khi replacer là một hàm, bạn có thể can thiệp để thay đổi từng giá trị (hoặc loại bỏ) trước khi nó được chuyển thành JSON.

Ví dụ:

const product = {
  name: "Book",
  price: 150,
  inStock: true
};

const jsonStr = JSON.stringify(product, (key, value) => {
  if (typeof value === "number") {
    return value + " USD";  // Thêm đơn vị tiền
  }
  return value;
});
console.log(jsonStr);
// Kết quả: '{"name":"Book","price":"150 USD","inStock":true}'

Mỗi giá trị kiểu số đã được thêm hậu tố " USD".

Space – định dạng chuỗi JSON dễ đọc (pretty print)

Tham số space giúp làm đẹp (indent) chuỗi JSON để dễ đọc, đặc biệt hữu ích khi in ra console hoặc lưu trữ file cấu hình.

Cách sử dụng:

• Là số: chỉ định số lượng khoảng trắng cho mỗi cấp thụt lề.

• Là chuỗi: dùng chuỗi đó làm tiền tố thụt lề.

Ví dụ:

const student = {
  name: "John",
  age: 20,
  courses: ["Math", "Physics"]
};

const jsonStr = JSON.stringify(student, null, 2);
console.log(jsonStr);

/* Kết quả:
{
  "name": "John",
  "age": 20,
  "courses": [
    "Math",
    "Physics"
  ]
}
*/

JSON đã được thụt lề bằng 2 khoảng trắng cho mỗi cấp.

Ví dụ minh họa tổng hợp JSON.stringify() bằng JavaScript

Ví dụ object thông thường:

const person = { name: "Tom", age: 28 };
console.log(JSON.stringify(person));
// Kết quả: '{"name":"Tom","age":28}'

Dùng replacer (array) để lọc thuộc tính:

console.log(JSON.stringify(person, ["name"]));
// Kết quả: '{"name":"Tom"}'

Dùng space để tạo chuỗi dễ đọc:

console.log(JSON.stringify(person, null, 4));
/* Kết quả:
{
    "name": "Tom",
    "age": 28
}
*/

Lưu ý khi dùng JSON.stringify() trong JavaScript

Khi sử dụng JSON.stringify(), có một số điểm quan trọng cần ghi nhớ để tránh lỗi và mất dữ liệu:

Không thể chuyển đổi function, symbol, undefined

• Các giá trị thuộc các kiểu dữ liệu function, symbol, hoặc undefined không được hỗ trợ trong JSON và sẽ bị loại bỏ khi stringify.

Ví dụ:

const obj = {
  name: "Anna",
  greet: function() { console.log("Hi"); },
  token: Symbol("id"),
  temp: undefined
};

console.log(JSON.stringify(obj));
// Kết quả: '{"name":"Anna"}'

Các thuộc tính greet, token, temp bị loại bỏ.

Object có vòng lặp tham chiếu (circular reference) gây lỗi

• Nếu một đối tượng chứa vòng lặp (tham chiếu đến chính nó hoặc vòng lặp với object khác), JSON.stringify() sẽ ném lỗi.

Ví dụ:

const a = {};
a.self = a;

JSON.stringify(a); //  Lỗi: TypeError: Converting circular structure to JSON

Cách xử lý: Dùng thư viện như circular-json, flatted hoặc tự kiểm tra trước khi stringify.

Kiểm tra kỹ dữ liệu trước khi stringify

Luôn đảm bảo rằng:

• Dữ liệu không chứa các vòng lặp.

• Không chứa các giá trị không hợp lệ.

• Các trường cần thiết đều có mặt.

Ứng dụng thực tế của JSON.stringify() trong JavaScript

Lưu dữ liệu vào LocalStorage / SessionStorage

Vì các API lưu trữ trình duyệt chỉ hỗ trợ chuỗi, cần chuyển object sang chuỗi trước khi lưu.

Ví dụ:

const user = { name: "Alice", age: 30 };
localStorage.setItem("userData", JSON.stringify(user));

Truyền dữ liệu qua API

Nhiều API yêu cầu dữ liệu đầu vào ở định dạng JSON string, nhất là với RESTful APIs.

Ví dụ:

const data = { email: "[email protected]", password: "123456" };

fetch("/api/login", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(data)
});

Debug dữ liệu phức tạp

Sử dụng console.log(JSON.stringify(obj, null, 2)) giúp dễ dàng đọc dữ liệu phức tạp khi debug.

Ví dụ:

console.log(JSON.stringify(myData, null, 2));

So sánh với JSON.parse() trong JavaScript

Kết hợp cả hai: lưu trữ – phục hồi

Ví dụ:

// Lưu vào LocalStorage
const obj = { a: 1, b: 2 };
localStorage.setItem("data", JSON.stringify(obj));

// Lấy lại và chuyển về object
const saved = localStorage.getItem("data");
const parsed = JSON.parse(saved);
console.log(parsed);  // { a: 1, b: 2 }

Kết bài

JSON.stringify() là một công cụ mạnh mẽ và không thể thiếu khi làm việc với dữ liệu trong JavaScript, đặc biệt là trong bối cảnh hiện đại nơi mà việc trao đổi dữ liệu qua API, lưu trữ local, hay ghi log trở nên phổ biến. Nhờ vào khả năng chuyển đổi các đối tượng JavaScript thành chuỗi JSON, lập trình viên có thể dễ dàng lưu trữ, truyền tải, và xử lý dữ liệu một cách linh hoạt và hiệu quả.

Tuy nhiên, cần lưu ý đến các hạn chế như không hỗ trợ một số kiểu dữ liệu (function, symbol, undefined), cũng như tránh các object có vòng lặp tham chiếu để không gây lỗi. Việc kết hợp JSON.stringify() và JSON.parse() một cách hợp lý sẽ giúp bạn quản lý dữ liệu hiệu quả trong hầu hết các ứng dụng JavaScript.

Hiểu rõ và sử dụng đúng JSON.stringify() không chỉ giúp mã nguồn trở nên gọn gàng hơn mà còn tăng độ tin cậy và hiệu suất khi xử lý dữ liệu. Đây là một kỹ năng cơ bản nhưng rất quan trọng với mọi lập trình viên JavaScript.