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


Posted in Javascript onJune 06, 2019

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

它也是我使用的那个,因为它是最明确的 - 让其他人轻松地遵循你的代码的意图

请记住,最好的代码不一定是最聪明的方式,它是最能将代码理解传达给他人的代码

const value = 12345;
// Concat Empty String
value + '';
// Template Strings
`${value}`;
// JSON.stringify
JSON.stringify(value);
// toString()
value.toString();
// String()
String(value);
// RESULT
// '12345'

比较5种方式

好吧,让我们用不同的值测试5种方式。以下是我们要对其进行测试的变量:

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

结合空字符串

string + ''; // 'hello'
number + ''; // '123'
boolean + ''; // 'true'
array + ''; // '1,2,3'
object + ''; // '[object Object]'
undefinedValue + ''; // 'undefined'
nullValue + ''; // 'null'
// ⚠
symbolValue + ''; // TypeError

从这里,您可以看到如果值为一个Symbol ,此方法将抛出TypeError。否则,一切看起来都不错。

模板字符串

`${string}`; // 'hello'
`${number}`; // '123'
`${boolean}`; // 'true'
`${array}`; // '1,2,3'
`${object}`; // '[object Object]'
`${undefinedValue}`; // 'undefined'
`${nullValue}`; // 'null'
// ⚠
`${symbolValue}`; // TypeError

使用模版字符串的结果与结合空字符串的结果基本相同。同样,这可能不是理想的处理方式,因为Symbol它会抛出一个TypeError。

如果你很好奇,那就是TypeError: TypeError: Cannot convert a Symbol value to a string

JSON.stringify()

// ⚠
JSON.stringify(string); // '"hello"'
JSON.stringify(number); // '123'
JSON.stringify(boolean); // 'true'
JSON.stringify(array); // '[1,"2",3]'
JSON.stringify(object); // '{"one":1}'
JSON.stringify(nullValue); // 'null'
JSON.stringify(symbolValue); // undefined
JSON.stringify(undefinedValue); // undefined

因此,您通常不会使用JSON.stringify将值转换为字符串。而且这里真的没有强制发生。因此,您了解可用的所有工具。然后你可以决定使用什么工具而不是根据具体情况使用?

有一点我想指出,因为你可能没有注意它。当您在实际string值上使用它时,它会将其更改为带引号的字符串。

.toString()

string.toString(); // 'hello'
number.toString(); // '123'
boolean.toString(); // 'true'
array.toString(); // '1,2,3'
object.toString(); // '[object Object]'
symbolValue.toString(); // 'Symbol(123)'
// ⚠
undefinedValue.toString(); // TypeError
nullValue.toString(); // TypeError

所以PK其实就是在toString()和String(),当你想把一个值转换为字符串。除了它会为undefined和null抛出一个错误,其他表现都很好。所以一定要注意这一点。

String()

String(string); // 'hello'
String(number); // '123'
String(boolean); // 'true'
String(array); // '1,2,3'
String(object); // '[object Object]'
String(symbolValue); // 'Symbol(123)'
String(undefinedValue); // 'undefined'
String(nullValue); // 'null'

好吧,我想我们找到了胜利者

正如你所看到的,String()处理null和undefined相当不错。不会抛出任何错误 - 除非这是你想要的。一般来说记住我的建议。您将最了解您的应用程序,因此您应该选择最适合您情况的方式。

结论:String()

在向您展示了所有不同方法如何处理不同类型的值之后。希望您了解这些差异,并且您将知道下次处理代码时要使用的工具。如果你不确定,String()总是一个很好的默认选择

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript获得地址栏参数的两种方法
Nov 08 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
javascript实现扫雷简易版
Aug 18 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 #Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 #Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 #Javascript
详解新手使用vue-router传参时注意事项
Jun 06 #Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 #Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 #Javascript
webpack4之如何编写loader的方法步骤
Jun 06 #Javascript
You might like
php设计模式  Command(命令模式)
2011/06/17 PHP
php数组去重的函数代码
2013/02/03 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
PHP多文件上传实例
2015/07/09 PHP
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
vue写一个组件
2018/04/09 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
python 图片验证码代码
2008/12/07 Python
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
基于Python闭包及其作用域详解
2017/08/28 Python
mac系统安装Python3初体验
2018/01/02 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
Python urllib2运行过程原理解析
2020/06/04 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
党员学习正风肃纪思想汇报
2014/09/12 职场文书
小学思品教学反思
2016/02/20 职场文书
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers