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 相关文章推荐
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
JqGrid web打印实现代码
May 31 Javascript
js实现的折叠导航示例
Nov 29 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
JS实现li标签的删除
Apr 12 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 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
MYSQL环境变量设置方法
2007/01/15 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python列表使用实现名字管理系统
2019/01/30 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
python 两种方法删除空文件夹
2020/09/29 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
会计专业应届生求职信
2013/11/24 职场文书
11月红领巾广播稿
2014/01/17 职场文书
入党积极分子介绍信
2014/01/17 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
绩效考核实施方案
2014/03/18 职场文书
2014年检验员工作总结
2014/11/19 职场文书
结婚保证书
2015/01/16 职场文书
开学典礼校长致辞
2015/07/29 职场文书
2016党员入党决心书
2015/09/22 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers
从原生JavaScript到React深入理解
2022/07/23 Javascript