当前位置:首页 > 日记 > 正文

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

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

前言

大家应该都知道,对于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 Stringfalse> typeof new String("Fundebug")'object'> new String("Fundebug") instanceof Stringtrue

事实上,将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 {}; }};

调用结果:

> "" + objvalueOftoStringTypeError: Cannot convert object to primitive value> String(obj)toStringvalueOfTypeError: Cannot convert object to primitive value

它们的结果相同

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

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

由于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

相关文章

Excel怎么做减法运算Excel做减法运

Excel怎么做减法运算Excel做减法运

运算,方法,步骤,减法,怎么做,  我们经常使用Excel进行各类运算,可是我们发现软件自身是没有减法运算的函数,那遇到减法运算的时候怎么使用Excel进行运算呢?今天就来跟大家分享Excel做减法运算的方法,希望对你有帮助!Excel做减法运算的步骤打…

qq安全中心申请解冻教程

qq安全中心申请解冻教程

安全中心,方法,教程,电脑软件,qq,  当你的Q中病毒后恶意给好友发的垃圾信息,别人会举报你的Q,一旦超过3个举报,TX会把你的Q直接冻结,那么冻结后我们要怎么解冻了?今天小编给你分享一下qq安全中心申请解冻的方法,欢迎阅读。qq安全中心申请解冻…

怎么在ppt中使用公式编辑器ppt中使

怎么在ppt中使用公式编辑器ppt中使

公式编辑器,方法,数学公式,电脑软件,ppt,  使用PPT的一系列操作看起来很简单,真正自己制作起来却经历了不少挑战;公式编辑器都是可以直接在菜单里面调用的。下面小编就教你怎么在ppt中使用公式编辑器。希望对你有帮助!ppt中使用公式编辑器…

wps文字怎么设置页面布局

wps文字怎么设置页面布局

文字,布局,设置,页面布局,方法,  掌握wps文字布局页面的方法,对我们今后处理文档是很有帮助的。对于新手来说还是有一定难度,怎么办?下面就让小编告诉你wps文字如何布局页面,欢迎大家来到学习。wps文字布局页面的方法1、点击WPS文字边上的箭…

ppt2007怎么设置表格边框颜色ppt20

ppt2007怎么设置表格边框颜色ppt20

设置,边框,方法,步骤,文件,  PPT表格边框颜色的设置可以起到美化表格的效果,小编今天教你怎么设置。希望对你有帮助!ppt2007设置表格边框颜色的步骤1.通过表格样式,直接改变表格颜色。选中表格,点击表格工具(设计)——表格样式。pp…

缩放Word2016文档内容的方法有哪些

缩放Word2016文档内容的方法有哪些

方法,文档,缩放,内容,有哪些,  在查看或编辑Word文档时,放大文档能够更方便地查看文档内容,缩小文档可以在一屏内显示更多内容。Word文档的放大和缩小可以通过调整文档的显示比例实现。以下是小编为您带来的关于缩放Word2016文档内容的方法…

JavaScript自执行函数和jQuery扩展

JavaScript自执行函数和jQuery扩展

扩展方法,函数,执行,详解,电脑软件,我们通常将JS代码写在一个单独的JS文件中,然后在页面中引入该文件。但是,有时候引入后会碰到变量名或函数名与其它JS代码冲突的问题。那么如何解决这个问题呢?作用域隔离。在JS中,作用域是通过函数来划分的,将…

JS中把函数作为另一函数的参数传递

JS中把函数作为另一函数的参数传递

函数,参数传递,方法,中把,电脑软件,今天在给元素注册事件的时候,使用addEventListener遇到了一个问题,这个好像之前也遇到过,觉得有必要总结一下,就是js函数作为参数引发的问题。首先看以下代码,觉得下面代码有问题吗?是否能达到点击id3对应的元…

ps怎么给图形上渐变色

ps怎么给图形上渐变色

图形,渐变色,方法,电脑软件,ps,  给图形上色在ps中很简单,但其实上渐变色也很好看。那么大家知道ps怎么给图形上渐变色吗?下面是小编整理的ps怎么给图形上渐变色的方法,希望能帮到大家!ps给图形上渐变色的方法1、新建一个图层,画一个圆形。2…

WPS演示插入背景音乐的方法是什么

WPS演示插入背景音乐的方法是什么

方法,背景音乐,演示,电脑软件,WPS,  制作PPT的时候,需要加入一些元素使得PPT更加吸引人,其中给PPT加入背景音乐是常用的方法之一。那么在wps中,这个方法应该怎么使用,一起来探讨一下。以下是小编为您带来的关于WPS演示插入背景音乐的方法,希望…

JavaScript定义函数的三种实现方法

JavaScript定义函数的三种实现方法

方法,函数,三种,定义,电脑软件,JavaScript定义函数的三种实现方法【1】正常方法function print(msg){ document.write(msg);}对函数进行调用的几种方式: 函数名(传递给函数的参数1,传递给函数的参数2,….)变量 = 函数名(传递给函数的参数1,传递给…

Word中进行设置半透明的操作方法

Word中进行设置半透明的操作方法

设置,半透明,操作方法,操作步骤,电脑软件,  在我们使用word的时候经常会往里面插入一些图片,在word中,我们还可以将图片的背景颜色更改为半透明色,还可以做些其他的改动。今天,小编就教大家在Word中进行设置半透明的操作方法。Word中进行设置…