JavaScript中将值转换为字符串的五种方法总结


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实现简单模态窗口,背景灰显
Nov 14 Javascript
js中格式化日期时间型数据函数代码
Nov 08 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
详解vue-router基本使用
Apr 18 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
详解Vue 如何监听Array的变化
Jun 06 #Javascript
js常见遍历操作小结
Jun 06 #Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 #Javascript
vue中的过滤器实例代码详解
Jun 06 #Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 #Javascript
原生js通过一行代码实现简易轮播图
Jun 05 #Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 #Javascript
You might like
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
jquery select操作的日期联动实现代码
2009/12/06 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
python中函数传参详解
2016/07/03 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
python3安装speech语音模块的方法
2018/12/24 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
护理助产毕业生的求职信
2014/03/02 职场文书
开工仪式主持词
2014/03/20 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
Python requests用法和django后台处理详解
2022/03/19 Python