了解在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 相关文章推荐
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
详解JavaScript匿名函数和闭包
Jul 10 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
用js判断输入是否为中文的函数
2014/03/10 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
JS实现随机点名器
2020/04/12 Javascript
js实现时间日期校验
2020/05/26 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
Python实现excel转sqlite的方法
2017/07/17 Python
Python3实现购物车功能
2018/04/18 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
商务英语专业毕业生自荐信
2013/11/05 职场文书
机关财务管理制度
2014/01/17 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
开会通知短信大全
2015/04/20 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android