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 相关文章推荐
很可爱的输入框
Aug 03 Javascript
DIV菜单层实现代码
Nov 19 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
js窗口震动小程序分享
Nov 28 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
Vue组件的使用教程详解
Jan 05 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 Javascript
Vue性能优化的方法
Jul 30 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核心代码分析require和include的区别
2011/01/02 PHP
浅析php数据类型转换
2014/01/09 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
js省市区级联查询(插件版&无插件版)
2017/03/21 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
python的sorted用法详解
2019/06/25 Python
Python super()方法原理详解
2020/03/31 Python
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
母亲节演讲稿范文
2014/01/02 职场文书
宿舍打麻将检讨书
2014/01/24 职场文书
工厂搬迁方案
2014/05/11 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
初中体育教学随笔
2015/08/15 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python