Javascript中将变量转换为字符串的三种方法


Posted in Javascript onSeptember 19, 2017

前言

大家应该都知道,对于JavaScript,有3种不同方法可以将变量转换为字符串。这篇文章将详细介绍这些方法,并比较他们的优劣。下面话不多说了,来一起看看详细的介绍吧。

3种方法

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

  • value.toString()
  • "" + value
  • String(value)

当value为null或者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)的细微差别

""+valueString(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

它们的结果相同

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

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

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

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

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

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

结论

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

参考

  • JavaScript values: not everything is an object
  • What is {} + {} in JavaScript?
  • String concatenation in JavaScript
  • JavaScript String 对象

原文: Converting a value to string in JavaScript

译者: Fundebug

Javascript 相关文章推荐
用 javascript 实现的点击复制代码
Mar 24 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 #Javascript
JavaScript 中的 this 简单规则
Sep 19 #Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 #Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 #Javascript
原生js中ajax访问的实例详解
Sep 19 #Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 #Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 #Javascript
You might like
我的论坛源代码(九)
2006/10/09 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
php解析json数据实例
2014/08/19 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
python实现微信远程控制电脑
2018/02/22 Python
python绘制多个曲线的折线图
2020/03/23 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
pymysql 开启调试模式的实现
2019/09/24 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
存储过程和函数的区别
2013/05/28 面试题
销售会计工作职责
2013/12/02 职场文书
小学教师办公室制度
2014/02/03 职场文书
销售团队口号大全
2014/06/06 职场文书
工程催款通知书
2015/04/17 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
Python中的tkinter库简单案例详解
2022/01/22 Python
HTML常用标签超详细整理
2022/03/19 HTML / CSS