了解在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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
Node.js API详解之 module模块用法实例分析
May 13 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 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
mysql数据库差异比较的PHP代码
2012/02/05 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
Vue程序调试的方法
2019/06/17 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Python如何生成xml文件
2020/06/04 Python
Python如何实现机器人聊天
2020/09/10 Python
详解python程序中的多任务
2020/09/16 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
自我评价的正确写法
2013/09/19 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
《画家乡》教学反思
2014/04/22 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
Golang 字符串的常见操作
2022/04/19 Golang
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js