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 相关文章推荐
点击下载链接 弹出页面实现代码
Oct 01 Javascript
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
js parentElement和offsetParent之间的区别
Mar 23 Javascript
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
layui文件上传实现代码
May 20 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 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者的疑难问答(2)
2006/10/09 PHP
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
子页向父页传值示例
2013/11/27 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
Python用for循环实现九九乘法表
2018/05/31 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
关于python字符串方法分类详解
2019/08/20 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
房地产销售大学生自我评价分享
2013/11/11 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
意向协议书范本
2014/04/23 职场文书
史上最牛辞职信
2015/05/13 职场文书
离婚起诉书范本
2015/05/18 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
话题作文之诚信
2019/11/28 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
详解Spring事件发布与监听机制
2021/06/30 Java/Android