如果你订阅了Airbnb 的 JAVAScript 风格指南,就会知道最好的方法是使用 "String()"
我用他是因为它是最明确的——容易让其他人明白你代码的意图
请记住,最好的代码并不需要多聪明的方式,而是能将你的代码理解传达给他人
const value = 12345; // Concat Empty String value + ''; // Template Strings `${value}`; // JSON.stringify JSON.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
类型错误: 不能把 Symbol 类型的值转换为 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); // undefined JSON.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(); // ❌ TypeError nullValue.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()是最好的选择