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类中的公有变量和私有变量
Jul 24 Javascript
封装的原生javascript弹出层代码
Sep 24 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
js点击选择文本的方法
Feb 09 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
分析JS中this引发的bug
Dec 12 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
Vue监听页面刷新和关闭功能
Jun 20 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
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
一些PHP写的小东西
2006/12/06 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
windows下安装python paramiko模块的代码
2013/02/10 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
Python使用gRPC传输协议教程
2018/10/16 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
中英双版中文教师求职信
2013/10/27 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
采购意向书范本
2014/03/31 职场文书
安全演讲稿开场白
2014/08/25 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
精神病医院见习报告
2014/11/03 职场文书
教师节倡议书2015
2015/04/27 职场文书
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js