JavaScript 对象转 String - 详细教程

发布时间：2023-05-22

一、JSON.stringify方法

我们在前端开发中，经常需要将 JavaScript 对象转换成字符串，以便于传输、存储或展示。以下是使用 JSON.stringify() 实现对象转换成字符串的示例：

const obj = {name: "张三", age: 18};
const jsonObj = JSON.stringify(obj);
console.log(jsonObj); //"{"name":"张三","age":18}"

可以看到，使用 JSON.stringify() 方法将对象转换成了字符串，其中键值对以双引号包裹，成为了一个合法的 JSON 格式字符串。 此外，JSON.stringify() 方法还支持第二个参数，用于指定需要序列化的属性和其对应的转换规则，以及第三个参数控制缩进：

const obj = {name: "张三", age: 18};
const jsonObj = JSON.stringify(obj, ["name"], 2);
console.log(jsonObj); //"
{
  "name": "张三"
}
"

此时，我们只选择将 name 属性序列化，展示出来的结果也进行了缩进，并更容易阅读。

二、toString方法

除了 JSON.stringify() 方法之外，我们还可以使用对象的 toString() 方法将其转换成字符串。不过需要注意的是，toString() 方法并不是为了序列化对象设计的，而是将对象转换为字符串形式的默认方式。如果我们想要自定义序列化规则，还需要借助其它辅助工具。

const obj = {name: "张三", age: 18};
const str = obj.toString();
console.log(str); //"[object Object]"

可以看到，使用 toString() 方法将对象转换成了 [object Object] 的字符串形式，而没有包括对象的属性信息。

三、自定义 toJSON 方法

为了能够将对象转换成我们自定义的字符串形式，我们可以通过为对象添加 toJSON() 方法实现。这个方法在我们调用 JSON.stringify() 方法时会被自动调用，将返回结果作为对应的值进行序列化。

const obj = {
  name: "张三",
  age: 18,
  toString() {
    return `${this.name}今年${this.age}岁了`;
  },
  toJSON() {
    return {
      desc: this.toString()
    }
  }
};
const jsonObj = JSON.stringify(obj);
console.log(jsonObj); // "{"desc":"张三今年18岁了"}"

这里我们实现了一个自定义的 toString() 方法，对应的 toJSON() 方法返回了一个包含我们自定义字符串形式的对象，从而实现了我们的需求。

四、使用 eval 方法

除了以上的方法之外，一些老旧代码中可能还使用了 eval 函数来实现将对象转换为字符串的需求。虽然 eval 函数使用起来非常方便，但是由于会对传入的字符串进行直接执行，存在一定的安全风险，应该尽可能避免使用。

const obj = {name: "张三", age: 18};
const str = `(${JSON.stringify(obj)})`;
const evalStr = eval(str);
console.log(evalStr); // {name: "张三", age: 18}

上述代码中，我们使用 JSON.stringify() 方法将对象转换成字符串，并在其两侧添加括号，然后使用 eval() 函数对其进行了计算，将字符串形式的对象转换成了原始对象。

五、结语

JavaScript 对象转换为字符串是前端开发中常见的需求，本文介绍了多种实现方式，包括 JSON.stringify() 方法、toString() 方法、自定义 toJSON() 方法、eval 函数等。在实际开发中，我们可以根据具体场景选择合适的方法，实现需求。

推荐文章