译者按: 语言的细枝末节了解一下就可以了,不需要太较真,不过如果一点也不知道的话,那就不太妙了。

  • 原文: Converting a value to string in JavaScript
  • 译者: Fundebug

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

对于JavaScript,有3种不同方法可以将变量转换为字符串。这篇博客将详细介绍这些方法,并比较他们的优劣。

3种方法

将变量转换为字符串的3种方法如下:

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

valuenull或者undefined时,第1种方法就不行了。而方法2和方法3基本上是一样的。

  • ""+value: 将value空字符串相加,即可将其转换为字符串。这种方法其实是一种稍微晦涩的技巧,可能会让别人难于理解开发者的意图。不过,这一点见仁见智,有些人偏爱这种方法。
  • String(value): 这种方法非常清晰:使用String()函数将value转换为字符串。不过,String()有两种不同用法,容易混淆,尤其对于Java开发者来说。当String()和运算符new一起作为构造函数使用时,它返回一个新创建的String对象;当不用new运算符调用String()时,它只把value转换成原始的字符串。这两者是非常不同的:
> String("Fundebug") === new String("Fundebug")
false> typeof String("Fundebug")
'string'
> String("Fundebug") instanceof String
false> typeof new String("Fundebug")
'object'
> new String("Fundebug") instanceof String
true

事实上,将String()作为构造函数使用并不常见,因此仅使用它来转换字符串就好了。

""+value与String(value)的细微差别

""+value与String(value)都可以将value转换为字符串,它们是如何做到的呢?事实上,它们虽然结果相同,但是方法稍有区别。

将primitive基本类型转换为字符串

两种方法都使用内部函数ToString()primitive基本类型转换为字符串。ToString()函数在ECMAScript 5.1 (§9.8)中定义了,但是并不能直接使用,因此称作内部函数。下面的表格显示了ToString()函数如何将primitive基本类型转换为字符串:

参数 结果
undefined "undefined"
null "null"
Boolean "true"或者 "false"
Number 将数字转换为字符串,例如: "1.765"
String 无需转换

将Object转换为字符串

转换为字符串之前,两种方法都会先将Object转换为primitive。不同的是,""+value使用内部函数ToPrimitive(Number)(除了date类型),而String(value)使用内部函数ToPrimitive(String)

  • ToPrimitive(Number): 先调用obj.valueOf,若结果为primitive则返回;否则再调用obj.toString(),若结果为primitive则返回;否则返回TypeError
  • ToPrimitive(String): 与ToPrimitive(Number)类似,只是先调用obj.toString(),后调用obj.valueOf()

可以通过以下示例了解区别,obj如下:

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

它们的结果相同

""+value与String(value)虽然不同,但是我们很少能感觉到。因为,大多数object使用默认的valueOf(),它返回对象本身:

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

由于valueOf()返回值并非primitive,因此ToPrimitive(Number)会跳过valueOf(),而返回toString()的返回值。这样,与ToPrimitive(String)的返回值就一样了。

objectBooleanNumber或者String实例时,valueOf()将返回primitive。这就意味着两者的计算过程是这样的:

  • ToPrimitive(Number):valueOf()返回primitive值,然后使用ToString()转换为字符串。
  • ToPrimitive(String): toString()通过ToString()函数将primitive值转换为字符串。

可知,虽然计算过程不同,但是它们的结果是一样的。

结论

那么你该选择哪种方法呢?如果你可以确保value值不是nullundefined,那么不妨使用value.toString() 。否则,你只能使用""+value 和String(value),它们基本上是一样的。

参考

  1. JavaScript values: not everything is an object
  2. What is {} + {} in JavaScript?
  3. String concatenation in JavaScript
  4. JavaScript String 对象

版权声明:
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/201...

JS中将变量转为字符串相关推荐

  1. java变量名转字符串_JS中将变量转为字符串

    译者按: 语言的细枝末节了解一下就可以了,不需要太较真,不过如果一点也不知道的话,那就不太妙了. 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 对于JavaScr ...

  2. JS将对象转为字符串

    1. 对象转为字符串 使用JSON.stringfy() JSON.stringify()将javascript对象转换为通过Web服务器发送数据所需的字符串. 语法: JSON.stringify( ...

  3. php 转化js数组字符串,js数组怎么转为字符串

    js数组转字符串的方法:1.使用toString()函数,语法"Array.toString()":2.使用join()函数,将数组元素连接起来以构建一个字符串,语法"a ...

  4. js 把对象转为字符串,并以逗号隔开

    项目上一个模块有一个这样的需求,需要把表单form对象的值转换成字符串拼接到另一个表单上,下面先看下效果图. 这个是动态表单,需要填写值 这个图是转换后的数据 如表单是下面对象 let obj = { ...

  5. js中将字符串转换成json的三种方式

    ECMA-262(E3) 中没有将JSON概念写到标准中,还好在 ECMA-262(E5) 中JSON的概念被正式引入了,包括全局的JSON对象和Date的toJSON方法. 1,eval方式解析,恐 ...

  6. js中定义用字符串拼接起来的变量名的变量

    转载:https://www.cnblogs.com/vlone/p/4602072.html js中定义用字符串拼接起来的变量名的变量 今天在写js的时候碰到了难题,我又一个页面需要生成很多的变量. ...

  7. js中把字符串分割为数组,把数组转为字符串

    字符串分割为数组,把数组转为字符串 1.字符串分割为数组 let val='1,2,3,4,5' let arr=val.split(',')//arr=['1','2','3','4','5'] 2 ...

  8. js 改写对象转字符串 字符串转对象(不丢失对象方法)

    js 改写对象(包括方法)转字符串 对象转字符串 字符串转对象 总结 js中将对象转化为字符串可以用JSON.stringify,字符串转对象可以用JSON.parse.这两个方法在大部分的情况下都很 ...

  9. JS js实现数组以及字符串去重的方法

    JS js实现数组去重的方法,字符串同样可以用 一.new Set 二.创新数组查询判断加入 三.原数组前后查询比较删除 四.双重for循环遍历去重 五.利用对象不能存储重复属性的特点 方法1: 循环 ...

最新文章

  1. 1、存在如下数列1、1、2、4、7、13、24、44、81、149......现要求该数列第n项的值(n从O开始算)。 程序运行结果: 1/2 输入:4 输出:7 输入:9 输出:149
  2. 获取32R的图像的直方图的一个算法
  3. 根据年 -月查询这个月的第一天和最后一天
  4. python从小到大的顺序输出_「小白专栏」Python中使用for循环,为什么输出结果不是按顺序?...
  5. oracle sysau,ORACLE 10GR2 ASM 如何修改AU_SIZE的大小
  6. Minor GC和Major GC
  7. 对象(sqlca、sqlsa、sqlda)
  8. drop sqlite 多个表_android sqlite 一次创建多个表
  9. matlab如何把正弦转化为余弦公式,高中正弦和余弦公式定理,正余弦转化公式
  10. Minecraft Mod开发环境搭建 | Minecraft 1.15.2 | Forge 31.1.0
  11. Java利用数组求某年某日某月是某年的第几天(数组)
  12. MLIR深入 —— 转换流程详解(以Toy接入为例)
  13. 中国推出网上“防沉迷系统”
  14. (多项式)因式分解定理(Factor theorem)与多项式剩余定理(Polynomial remainder theorem)(多项式长除法)
  15. 如何自己开发一个Android APP(3)——XML和Android
  16. 【OBS Studio】脚本自动生成大量场景思考实践
  17. Sixth season fifteenth and sixteenth episode,things that could have been......(没有如果)
  18. coffeeScript demo
  19. matlab火控雷达,基于MATLAB的GUI设计伺服系统仿真软件
  20. mac上超级好用的划词、截图翻译器bob

热门文章

  1. Java排序之归并排序
  2. Python笔记---错误笔记
  3. oracle insert 字符插入问题
  4. 三言两语话敏捷(2) - 持续集成
  5. ASP.NET网站防止SQL注入攻击
  6. 用 Ajax 和 RSS 攒个首页新闻——(上)
  7. Java学习系列(十二)Java面向对象之序列化机制及版本
  8. JavaScript知识点之JSON.parse
  9. ListView动态添加控件
  10. Berkeley DB Java Edition