首页 > 编程笔记 > JavaScript笔记

JS将常用值转换为字符串

JavaScript 能够根据运算环境自动转换值的类型，以满足运算需要。但是在很多情况下需要开发者手动转换数据类型，以控制运算过程。

转换为字符串

常用值转换为字符串，如图所示。

常用值转换为字符串
转换前 转换后
1 "1"
0 "0"
true "true"
false "false"
"" ""
undefined "undefined"
null "null"
NaN "NaN"
Infinity "Infinity"

把值转换为字符串的常用方法有 2 种，具体说明如下。

1. 使用加号运算符

当值与空字符串相加运算时，JavaScript 会自动把值转换为字符串。

1) 把数字转换为字符串，返回数字本身。 
var n = 123;
n = n + "";
console.log(typeof n); //返回类型为 string

2) 把布尔值转换为字符串，返回字符串 "true" 或 "false"。 
var b = true;
b = b + "";
console.log(b); //返回字符串"true"

3) 把数组转换为字符串，返回数组元素列表，以逗号分隔。如果是空数组，则返回空字符串。 
var a = [1,2,3];
a = a + "";
console.log(a); //返回字符串 "1,2,3"

4) 把函数转换为字符串，返回函数的具体代码字符串。 
var f = function(){return 1;};
f = f + "";
console.log(f);  //返回字符串 "function (){return 1;}"

① 如果是内置类型函数，则只返回构造函数的基本结构，省略函数的具体实现代码。而自定义类型函数与普通函数一样，返回函数的具体实现代码字符串。 
d = Date + "";
console.log(d);  //返回字符串 "function Date () { [ native code ] } "

② 如果是内置静态函数，则返回 [object Class] 格式的字符串表示。 
m = Math +"";
console.log(m);  //返回字符串 "[object Math]"

5) 如果把对象实例转换为字符串，则返回的字符串会根据不同类型或定义对象的方法和参数而不同。具体说明如下。

① 对象直接量，则返回字符串为 "[object object]" 
var a = {
  x :1
}
a = a + "";
console.log(a);  //返回字符串 "[object object]"

② 如果是自定义类的对象实例，则返回字符串为 "[object object]"。 
var a =new function(){}();
a = a + "";
console.log(a);  //返回字符串 "[object object]"

③ 如果是内置对象实例，具体返回字符串将根据参数而定。

正则表达式对象会返回匹配模式字符串，时间对象会返回当前GMT格式的时间字符串，数值对象会返回传递的参数值字符串或者0等。 
a = new RegExp(/^\w$/) + "";
console.log(a);  //返回字符串 "/^\w$/"

加号运算符有两个计算功能：数值求和、字符串连接。但是字符串连接操作的优先级要大于求和运算。因此，在可能的情况下，即运算元的数据类型不一致时，加号运算符会尝试把数值运算元转换为字符串，再执行连接操作。

但是当多个加号运算符位于同一行时，这个问题就比较复杂。例如： 
var a = 1 + 1 + "a";
var b= "a" + 1 + 1;
console.log(a);  //返回字符串 "2a"
console.log(b);  //返回字符串"a11"

通过上面代码可以看到，加号运算符还会考虑运算的顺序。对于变量 a 来说，按照从左到右的运算顺序，加号运算符会执行求和运算，然后再执行连接操作。但是对于变量 b 来说，由于 "a" + 1 表达式运算将根据连接操作来执行，所以返回字符串 "a1"，然后再用这个字符串与数值 1 进行运算，再次执行连接操作，最后返回字符串 "a11”，而不是字符串 "a2”。

如果要避免此类现象的发生，可以考虑使用小括号运算符来改变表达式的运算顺序。 
var b = "a" + (1 + 1) ; //返回字符串 "a2"

2. 使用toString()方法

当为简单的值调用 toString() 方法时，JavaScript 会自动把它们封装为对象，然后再调用 toString() 方法，获取对象的字符串表示。 
var a = 123456;
a.toString();
console.log(a);  //返回字符串“123456”

使用加号运算符转换字符串，实际上也是调用 toString() 方法来完成，只不过是 JavaScript 自动调用 toString() 方法实现的。

JavaScript 能够根据运算环境自动转换变量的类型。在自动转换中，JavaScript 一般根据运算的类型环境，按需进行转换。例如，如果在执行字符串为字符串；如果在执行基本数学运算，则会尝试把字符串转换为数值；如果在逻辑运算环境中，则会尝试把值转换为布尔值等。

转换为数字模式字符串

toString() 是 Object 类型的原型方法，Number 子类继承该方法后，重写了 toString()，允许传递一个整数参数，设置显示模式。数字默认为十进制显示模式，通过设置参数可以改变数字模式。

1) 如果省略参数，则 toString() 方法会采用默认模式，直接把数字转换为数字字符串。 
var a = 1.000;
var b = 0.0001;
var c = 1e-1;
console.log(a.toString());  //返回字符串“1”
console.log(b.toString());  //返回字符串“0.0001”
console.log(c.toString());  //返回字符串“0.0001”

toString() 方法能够直接输出整数和浮点数，保留小数位。小数位末尾的零会被清除。但是对于科学计数法，则会在条件许可的情况下把它转换为浮点数，否则就用科学计数法形式输出字符串。 
var a = 1e-14;
console.log(a.toString());  //返回字符串“1e-14”

在默认情况下，无论数值采用什么模式表示，toString() 方法返回的都是十进制的数字字符串。因此，对于八进制、二进制或十六进制的数字，toString() 方法都会先把它们转换为十进制数值之后再输出。 
var a = 010;  //八进制数值 10
var b = 0x10;  //十六进制数值10
console.log(a.toString());  //返回字符串“8”
console.log(b.toString());  //返回字符串“16”

2) 如果设置参数，则 toString() 方法会根据参数把数值转换为对应进制的值之后，再输出为字符串表示。 
var a = 10;  //十进制数值 10
console.log(a.toString(2));  //返回二进制数字字符串“1010”
console.log(a.toString(8));  //返回八进制数字字符串“12”
console.log(a.toString(16));  //返回二进制数字字符串“a”

转换为小数格式字符串

使用 toString() 方法把数值转换为字符串时，无法保留小数位。这对于货币格式化、科学计数等专业领域输出显示数字来说，无疑是不方便的。为此，JavaScript 提供了 3 个专用方法，具体说明如下。

1) toFixed()
toFixed() 能够把数值转换为字符串，并显示小数点后的指定位数。 
var a = 10;
console.log(a.toFixed(2));  //返回字符串“10.00”
console.log(a.toFixed(4));  //返回字符串“10.0000”

2) toExponential()
toExponential() 方法专门用来把数字转换为科学计数法形式的字符串。 
var a = 123456789;
console.log(a.toExponential(2));  //返回字符串“1.23e+8”
console.log(a.toExponential(4));  //返回字符串“1.2346e+8”
toExponential() 方法的参数指定了保留的小数位数。省略部分采用四舍五入的方式进行处理。

3) toPrecision()
toPrecision() 方法与 toExponential() 方法相似，但它可以指定有效数字的位数，而不是指定小数位数。 
var a = 123456789;
console.log(a.toPrecision(2));  //返回字符串“1.2e+8”
console.log(a.toPrecision(4));  //返回字符串“1.235e+8”

所有教程

优秀文章