首页 > 编程笔记 > JavaScript笔记 阅读:1,157

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”

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章