了解在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脚本函数库 方便开发
Oct 13 Javascript
jquery中的$(document).ready()与window.onload的区别
Nov 18 Javascript
Javascript 类型转换方法
Oct 24 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
两种方法解决javascript url post 特殊字符转义 + & #
Apr 13 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
Node.js API详解之 util模块用法实例分析
May 09 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
域名查询代码公布
2006/10/09 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
Laravel日志用法详解
2016/10/09 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
javascript中对对层的控制
2006/12/29 Javascript
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
学python爬虫能做什么
2020/07/29 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
Python 必须了解的5种高级特征
2020/09/10 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
毕业生就业自荐书
2013/12/15 职场文书
文明城市创建标语
2014/06/16 职场文书
人力资源管理求职信
2014/08/07 职场文书
开服装店计划书
2014/08/15 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
质检员岗位职责范本
2015/04/07 职场文书
基于python实现银行管理系统
2021/04/20 Python
Go timer如何调度
2021/06/09 Golang