jsTips 01 值到字符串转换的几种方法对比

发表于 | 分类于

这篇文章的标题也可以叫做在javascript中如何将值转换成字符串？
如果你使用Airbnb的风格指南，推荐的方式是使用Sring()。这种方式也是我平时最喜欢用的方式，因为他简洁易懂，更容易让别人明白你的代码的意思。
请记住，最好的代码不一定是采用最聪明的方式，而是更容易让别人读懂理解的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
const value=12345
// 方式一
value + '';
// 方式二
`${value}`;
// 方式三
JSON.stringify(value);
// 方式四
value.toString();
// 方式五
String(value);
// 结果
// '12345'

下面比较一下这5种方式

我们选取的如下的值来进行字符串的转换，分析一下各种转换方式的差异。

1
2
3
4
5
6
7
8
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;
方式一 值与空字符串连接
1
2
3
4
5
6
7
8
9
string + ''; // 'hello'
number + ''; // '123'
boolean + ''; // 'true'
array + ''; // '1,2,3'
object + ''; // '[object Object]'
undefinedValue + ''; // 'undefined'
nullValue + ''; // 'null'
// ⚠️
symbolValue + ''; // ❌ TypeError

可以看出，当一个值为symbol时，会报错。

方式二 模板字符串
1
2
3
4
5
6
7
8
9
`${string}`; // 'hello'
`${number}`; // '123'
`${boolean}`; // 'true'
`${array}`; // '1,2,3'
`${object}`; // '[object Object]'
`${undefinedValue}`; // 'undefined'
`${nullValue}`; // 'null'
// ⚠️
`${symbolValue}`; // ❌ TypeError

方式二与方式一转换的结果是一样的，当一个值为symbol时，会报错

1
TypeError: Cannot convert a Symbol value to a string

方式三 JSON.stringify()
1
2
3
4
5
6
7
8
9
// ⚠️
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

平时你可能很少使用这种方式将值转换成字符串，但是这种方式与以上两种方式对比没有发生任何报错，其中需要注意的是，值为string的转换会给转换前的值添加上引号。

方式四 toString()
1
2
3
4
5
6
7
8
9
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

这种方式经常使用，但是需要注意undefined与null值采用这种方式转换的时候会报错。

方式五 String()
1
2
3
4
5
6
7
8
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'

这种方式是Aribnb推荐的方式，很明显可以看出这种方式的优点，语义明确，无论symbol,undefined,null,都不会发生任何报错。

小结

通过以上各种方式的对比,相信你也可以清晰的了解各种方式的利弊。一般推荐使用String()方式，但还是要根据具体的情况选择具体的方式。 

1
当将一个number装换为字符串的时，可以简单的采用''+value
1
JSON.stringify()可以转换一个非嵌套的简单对象。
1
.toString()可以在将number转为十六进制与二进制时使用。