了解在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判断页面是否加载完成实现代码
Dec 11 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
vue 路由嵌套高亮问题的解决方法
May 17 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
vue实现打地鼠小游戏
Aug 21 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录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
jquery 获取json数据实现代码
2009/04/27 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
Python基于twisted实现简单的web服务器
2014/09/29 Python
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
python语言元素知识点详解
2019/05/15 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
python 实现屏幕录制示例
2019/12/23 Python
python调用win32接口进行截图的示例
2020/11/11 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
迪奥官网:Dior.com
2018/12/04 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
生物技术专业研究生自荐信
2013/09/22 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
小班秋游活动方案
2014/02/22 职场文书
高三毕业寄语
2014/04/10 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
Go Plugins插件的实现方式
2021/08/07 Golang
volatile保证可见性及重排序方法
2022/08/05 Java/Android