JS 把值转换成 String 的5个方法

时间 2019-11-16

原文原文链接

译者：Jessie
原文：连接
第一次翻译，当是锻炼下阅读能力，欢迎指正~javascript

若是你订阅了Airbnb 的 JavaScript 风格指南，就会知道最好的方法是使用 "String()" 👍html

我用他是由于它是最明确的——容易让其余人明白你代码的意图🤓java

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

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 错误，除此以外，其余都输出正确的值github

模板字符串

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

// ⚠️
`${symbolValue}`; // ❌ TypeError
复制代码

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

TypeError: Cannot convert a Symbol value to a stringbash

类型错误：不能把 Symbol 类型的值转换为 stringfrontend

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 去把一个值转成字符串，并且这里真的没有强制发生，我主要包括这种方式来完整让你了解可用的全部工具，而后你根据具体状况来挑选使用哪一种方式👍ide

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

扩展阅读 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 很是的好，不会抛出任何异常。记住我常常说的，你最了解你的程序，所以你应该选择最适合你的方式。

总结 Sting()🏆

在展现了全部不一样的方法如何处理不一样类型的值以后，但愿你能意识到这些差别而且知道下次处理代码时如何使用，若是你不确认，String()是最好的选择👍

社区意见

@MaxStalker: 我会根据场景使用不一样的方法：

"" + val: 只须要把数字转为字符串 —— 在 Map() 方法里面
JSON.stringify(val): 须要转换小的非嵌套对象
.toString(radix): 数字转换为 16 进制或者二进制

@frontendr: 使用 JSON.stringify时须要当心，它会把字符串转包进一个带引号的字符串里。

@super.pro.dev: 我也知道 new String(foo)，可是我不喜欢这个方法（它会建立一个字符串对象，相比之下 String() 建立的是字符串原函数）