JavaScript中将一个值转换为字符串的方法分析[译]

译者注:前两天在看ES5的时候顺便出了一道题,今天看到这篇文章,刚好解释的很清楚,就翻译了一下.
在JavaScript中,主要有三种方法能让任意值转换为字符串.本文讲解了每种方法以及各自的优缺点.

1.转换字符串的三种方法
这三种将value转换为字符串的方法是:

1.value.toString()
2."" + value
3.String(value)

第一种方法存在的问题是,它不能把null和undefined转换为字符串.还有第二种和第三种方法,这两种方法的效果基本一样.

•""+value: 使用加法运算符配合一个空字符串可以把任意值转换为字符串,我觉得这种方法代码的可读性很差,但相对String(value)来,还是有一些人更喜欢用这种转换方式.
•String(value): 这种方法可读性更好,唯一的问题是,这种函数调用可能会迷惑一些人,尤其是那些熟悉Java的的程序员,因为String同时也是一个构造函数.要注意的是它作为普通函数和作为构造函数时的表现完全不同:


代码如下:

> String("abc") === new String("abc")
false

> typeof String("abc")
'string'
> String("abc") instanceof String
false

> typeof new String("abc")
'object'
> new String("abc") instanceof String
true

String作为普通函数时会产生一个字符串(一个原始值).作为构造函数时会产生一个String对象的实例.后者在JavaScript中很少用到,所以基本上你可以忽略掉String作为构造函数的用法,但一定要记得它是个转换函数.

2.""+value 和 String(value)的细微差别
到现在你已经知道了+ 和 String()都可以将它们的“参数”转换为字符串.但他们的转换方式还是着有细微的差别,不过几乎所有的情况下,转换结果都是一样的.

2.1 将原始值转换为字符串
这两种方法都是使用引擎内部的ToString()操作将原始值转换为字符串的.“内部操作”的意思是:这个操作函数是在ECMAScript 5.1 (§9.8)中定义的,但ES语言本身并不能访问到它.下面这个表格解释了ToString()是如何转换原始值的.




















参数 结果
undefined "undefined"
null "null"
布尔值 "true"或者"false"
数字 数字作为字符串,比如"1.765"
字符串 无需转换

2.2 将对象值转换为字符串

这两种方法都先将对象值转换为原始值,然后再将原始值转换为字符串.但是在这个转换中, + 使用的是内部的ToPrimitive(Number)操作(除非被转换的是date对象),而String()用的是ToPrimitive(String).

•ToPrimitive(Number): 将一个对象值转换为原始值,首先调用obj.valueOf().如果返回值是一个原始值,则返回这个原始值.如果不是,则再调用obj.toString().如果返回值是个原始值,返回这个原始值.否则,抛出TypeError异常.
•ToPrimitive(String): 和上面的方法类似,只是优先调用obj.toString()方法而不是obj.valueOf().
通过转换下面的这个对象,你可以看到它们之间的差别:


代码如下:

var obj = {
valueOf: function () {
console.log("valueOf");
return {}; // 不是原始值,继续执行
},
toString: function () {
console.log("toString");
return {}; // 不是原始值,继续执行
}
};

//运行:
> "" + obj
valueOf
toString
TypeError: Cannot convert object to primitive value

> String(obj)
toString
valueOf
TypeError: Cannot convert object to primitive value

2.3 结果通常都相同
上面讲的区别,在实际情况中几乎不太可能遇到.因为:大部分对象都使用了默认的继承而来的valueOf()方法,返回值总是这个对象本身.

代码如下:

> var x = {}
> x.valueOf() === x
true

因此, ToPrimitive(Number)通常会跳过valueOf方法返回toString()方法的返回值,这就表现的和ToPrimitive(String)完全一样.但是,如果这个对象是Boolean,Number或者String的对象实例,那么它的valueOf()会返回一个原始值(被这个对象包装前的原始值).那么这两种操作就会按照如下步骤执行:

•ToPrimitive(Number)返回了对象的valueOf()方法的返回值(被包装前的原始值)再经过ToString()操作后的结果.
•ToPrimitive(String)返回了对象的toString()方法的返回值(在该对象被包装前的原始值上进行ToString()操作的返回值).
就这样,他们还是返回了相同的结果,只是转换的途径不同.

3.结论

你应该选择哪种方式来将其他类型的值转换为字符串呢?如果你能确保这个值永远不会是null或者undefined,则可以用value.toString()来转换.否则,""+value和String(value)选哪个都可以,看个人喜好,我认为String(value) 更明确一点.

4.相关文章


  1. JavaScript values: not everything is an object[原始值和对象值的区别]

  2. What is {} + {} in JavaScript? [解释了+运算符的工作原理]

  3. String concatenation in JavaScript [怎样才能更好的连接多个字符串]

(0)

相关推荐

  • javascript转换日期字符串为Date日期对象的方法

    本文实例讲述了javascript转换日期字符串为Date日期对象的方法.分享给大家供大家参考.具体如下: 这里实现把一个日期字符串如"2014-4-28 12:31:45"转换为Date对象: 方法一: 复制代码 代码如下: var strArray=str.split(" "); var strDate=strArray[0].split("-"); var strTime=strArray[1].split(":");

  • JavaScript数字和字符串转换示例

    1. 数字转换为字符串 a. 要把一个数字转换为字符串,只要给它添加一个空的字符串即可: 复制代码 代码如下: var n = 100; var n_as_string = n + ""; b. 要让数字更加显式地转换为字符串,可以使用String()函数: 复制代码 代码如下: var string_value = String(number); c. 使用toString()方法: 复制代码 代码如下: string_value = number.toString(); Numbe

  • JavaScript中把数字转换为字符串的程序代码

    1:把数字转换为字符串的方法 复制代码 代码如下: var string_value = String(number);     string_value = number.toString(); var n = 17;      binary_string = n.toString(2);                //Evaluates to "10001"      octal_string = "0" + n.toString(8);        //

  • JavaScript通过字典进行字符串翻译转换的方法

    本文实例讲述了JavaScript通过字典进行字符串翻译转换的方法.分享给大家供大家参考.具体分析如下: 这里实际上就是先设置一个对照的字典,然后通过翻译函数,从字典中找到相应的键值.需要在JavaScript 1.8以上版本使用 函数定义如下: function CreateTranslator(translationTable) function(s) s.replace( new RegExp([k for (k in translationTable)].join('|'), 'g'),

  • JavaScript将字符串转换为整数的方法

    本文实例讲述了JavaScript将字符串转换为整数的方法.分享给大家供大家参考.具体如下: var s='1'; var s2='2'; alert(parseInt(s) parseInt(s2)); 希望本文所述对大家的javascript程序设计有所帮助.

  • JavaScript将字符串转换成字符编码列表的方法

    本文实例讲述了JavaScript将字符串转换成字符编码列表的方法.分享给大家供大家参考.具体如下: JavaScript将字符串转换成字符编码列表,例如foo转换成 [112,111,111] 方法 1: JavaScript 1.6 Array.map('foo', function(x) { return String.charCodeAt(x) }) // is [112,111,111] 方法2: JavaScript 1.7 [ String.charCodeAt(x) for ea

  • javaScript 数值型和字符串型之间的转换

    1.数值型到String型的转化 假设该数值型(int/float/double)变量为:num 其转化后得到的字符串为:str 则其转化为字符串的方式为有三种,分别如下: (1) str = String.valueOf(num); (2) str =Integer.toString(num); (3) str =num+""; 2.String型到数值型的转化(此处以int为例,double,float类似) 其转化方式有两种,分别如下: (1) num=Integer.parse

  • JavaScript中将一个值转换为字符串的方法分析[译]

    译者注:前两天在看ES5的时候顺便出了一道题,今天看到这篇文章,刚好解释的很清楚,就翻译了一下.在JavaScript中,主要有三种方法能让任意值转换为字符串.本文讲解了每种方法以及各自的优缺点. 1.转换字符串的三种方法 这三种将value转换为字符串的方法是: 1.value.toString() 2."" + value 3.String(value) 第一种方法存在的问题是,它不能把null和undefined转换为字符串.还有第二种和第三种方法,这两种方法的效果基本一样. •

  • 举例讲解JavaScript中将数组元素转换为字符串的方法

    首先来看一下从一个数组中选择元素的方法slice(): 源代码: <!DOCTYPE html> <html> <body> ​ <p id="demo">Click the button to extract the second and the third elements from the array.</p> ​ <button onclick="myFunction()">Try it

  • JavaScript中将值转换为字符串的五种方法总结

    前言 如果您关注Airbnb的样式指南,首选方法是使用"String()"

  • 了解在JavaScript中将值转换为字符串的5种方法

    如果您关注Airbnb的样式指南,首选方法是使用"String()" 它也是我使用的那个,因为它是最明确的 - 让其他人轻松地遵循你的代码的意图 请记住,最好的代码不一定是最聪明的方式,它是最能将代码理解传达给他人的代码 const value = 12345; // Concat Empty String value + ''; // Template Strings `${value}`; // JSON.stringify JSON.stringify(value); // to

  • js以分隔符分隔数组中的元素并转换为字符串的方法

    如下所示: <html> <body> <script type="text/javascript"> var arr = new Array(3) ; arr[0] = "Jani"; arr[1] = "Hege"; arr[2] = "Stale"; document.write(arr.join() + "<br />");//默认情况下不提供分隔符,

  • JS 判断某变量是否为某数组中的一个值的3种方法(总结)

    1.正则表达式 js 中判断某个元素是否存在于某个 js 数组中,相当于 PHP 语言中的 in_array 函数. Array.prototype.in_array=function(e){ var r=new RegExp(','+e+','); return (r.test(','+this.join(this.S)+','));}; 用法如下: var arr=new Array(['b',2,'a',4]); arr.in_array('b');//判断'b'字符是否存在于 arr 数

  • Java中读取文件转换为字符串的方法

    方式一 /** 以字节为单位读取文件,常用于读二进制文件,如图片.声音.影像等文件. 当然也是可以读字符串的. */ /* 貌似是说网络环境中比较复杂,每次传过来的字符是定长的,用这种方式?*/ public String readString1() { try { //FileInputStream 用于读取诸如图像数据之类的原始字节流.要读取字符流,请考虑使用 FileReader. FileInputStream inStream=this.openFileInput(FILE_NAME)

  • JavaScript获取一个范围内日期的方法

    本文实例讲述了JavaScript获取一个范围内日期的方法.分享给大家供大家参考.具体分析如下: 指定开始和结束时间,范围该范围内的所有日期放入数组 Date.prototype.addDays = function(days) { var dat = new Date(this.valueOf()); dat.setDate(dat.getDate() + days); return dat; }; function getDates(startDate, stopDate) { var da

  • 将json对象转换为字符串的方法

    复制代码 代码如下: /* 将json对象转换为字符串 使用方法: var json = {id=3,name="abc"}; var str = tools.j2s(json); */ tools.j2s = function(O) { var S = []; var J = ""; if (Object.prototype.toString.apply(O) === '[object Array]') { for ( var i = 0; i < O.le

随机推荐