了解在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 相关文章推荐
js有序数组的连接问题
Oct 01 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 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
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
php实现将Session写入数据库
2015/07/26 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
Express.JS使用详解
2014/07/17 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
十条建议帮你提高Python编程效率
2016/02/16 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
python导入坐标点的具体操作
2019/05/10 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
Python加速程序运行的方法
2020/07/29 Python
采购主管的岗位职责
2013/12/17 职场文书
失业者真诚求职信范文
2013/12/25 职场文书
简短证婚人证婚词
2014/01/09 职场文书
股权收购意向书
2014/04/01 职场文书
李敖北大演讲稿
2014/05/24 职场文书
消防工作实施方案
2014/06/09 职场文书
七一建党节演讲稿
2014/09/11 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
股东出资协议书
2016/03/21 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
优化Mysql查询的示例
2022/04/26 MySQL