stringify JS中将值转换成字符串的5种方法

如果你订阅了Airbnb 的 JAVAScript 风格指南，就会知道最好的方法是使用 "String()"

我用他是因为它是最明确的——容易让其他人明白你代码的意图

请记住，最好的代码并不需要多聪明的方式，而是能将你的代码理解传达给他人

const value = 12345;// Concat Empty Stringvalue + '';// Template Strings`${value}`;// JSON.stringifyJSON.stringify(value);// toString()value.toString();// String()String(value);// RESULT// '12345'

对比这 5 个方法

让我们用不同的值测试这 5 个方法，下面是我们打算测试的值：

const string = "hello";const number = 123;const boolean = true;const array = [1, "2", 3];const object = {one: 1 };const symbolValue = Symbol('123');const undefinedValue = undefined;const nullValue = null;

拼接空字符串

string + ''; // 'hello'number + ''; // '123'boolean + ''; // 'true'array + ''; // '1,2,3'object + ''; // '[object Object]'undefinedValue + ''; // 'undefined'nullValue + ''; // 'null'symbolValue + ''; //TypeError

从这里可以看出如果值是 symbol 这个方法会抛出一个 TypeError 错误，除此之外，其他都输出正确的值

模板字符串

`${string}`; // 'hello'`${number}`; // '123'`${boolean}`; // 'true'`${array}`; // '1,2,3'`${object}`; // '[object Object]'`${undefinedValue}`; // 'undefined'`${nullValue}`; // 'null'`${symbolValue}`; // ❌ TypeError

实际上使用模板字符串和拼接字符串是输出相同的结果，再者，当处理 Symbol 这也不是最理想的方式因为它会抛出一个 TypeError

TypeError: Cannot convert a Symbol value to a string

JSON.stringify()

JSON.stringify(string); // '"hello"'JSON.stringify(number); // '123'JSON.stringify(boolean); // 'true'JSON.stringify(array); // '[1,"2",3]'JSON.stringify(object); // '{"one":1}'JSON.stringify(nullValue); // 'null'JSON.stringify(symbolValue); // undefinedJSON.stringify(undefinedValue); // undefined复制代码

你一般也不会使用 JSON.stringify 去把一个值转成字符串，而且这里真的没有强制发生，我主要包括这种方式来完整让你了解可用的所有工具，然后你根据具体情况来挑选使用哪种方式

有个点我要指出来因为你可能没注意，当你使用一个纯字符串格式的值转换出来就会包裹

引号

扩展阅读 Kyle Simpson 的 “You Don’t Know JS”: JSON Stringification

关于了解基本原理的重要性

你可能注意到我的代码笔记经常引用 Kyle 的书，我在上面学到了很多东西，我不是来自计算机科学背景，缺乏很多基本概念，他的书让我意识到明白基本原来是多么重要，对于那些想要成为高级工程师的人，真正了解基本原理是提升水平的好方法，否则很难提高。你最终知道了问题在那里，但是如果你知道了基本原理，就会知道为什么从而知道如何去解决，总之，强烈推荐这个系列给那些想成为高级程序员的人！

toString()

string.toString(); // 'hello'number.toString(); // '123'boolean.toString(); // 'true'array.toString(); // '1,2,3'object.toString(); // '[object Object]'symbolValue.toString(); // 'Symbol(123)'undefinedValue.toString(); // ❌ TypeErrornullValue.toString(); // ❌ TypeError

因此对比就留给了 toString 和 String, toString 也执行的不错，一定要注意的一点就是在 undefined 和 null 下面会抛出异常。

String()

String(string); // 'hello'String(number); // '123'String(boolean); // 'true'String(array); // '1,2,3'String(object); // '[object Object]'String(symbolValue); // 'Symbol(123)'String(undefinedValue); // 'undefined'String(nullValue); // 'null'

最后，我们找到了冠军

可以看到 String() 处理 undefined 和 null 非常的好 ，不会抛出任何异常。记住我经常说的，你最了解你的程序，因此你应该选择最适合你的方式。

在展示了所有不同的方法如何处理不同类型的值之后，希望你能意识到这些差异并且知道下次处理代码时如何使用，如果你不确认，String()是最好的选择