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 相关文章推荐
JavaScript 原型与继承说明
Jun 09 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
JavaScript Array对象基本方法详解
Sep 03 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上传、管理照片示例
2006/10/09 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
Python生成随机数的方法
2014/01/14 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
python之拟合的实现
2019/07/19 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
python3跳出一个循环的实例操作
2020/08/18 Python
python 字符串格式化的示例
2020/09/21 Python
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
行政文员岗位职责
2013/11/08 职场文书
安全大检查反思材料
2014/01/31 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
负责人任命书范本
2014/06/04 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers