了解在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 相关文章推荐
javascript 日期常用的方法
Nov 11 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
JavaScript实现动态生成表格
Aug 02 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
咖啡常见的种类
2021/03/03 新手入门
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
vue中post请求以a=a&b=b 的格式写遇到的问题
2018/04/27 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
Python通过解析网页实现看报程序的方法
2014/08/04 Python
推荐11个实用Python库
2015/01/23 Python
解析Python中while true的使用
2015/10/13 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
python中os包的用法
2020/06/01 Python
Python如何执行系统命令
2020/09/23 Python
python excel多行合并的方法
2020/12/09 Python
汽车检测与维修专业求职信
2013/10/30 职场文书
公积金转移接收函
2014/01/11 职场文书
优秀交警事迹材料
2014/01/26 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
红色经典电影观后感
2015/06/18 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书