了解在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 相关文章推荐
jQuery 白痴级入门教程
Nov 11 Javascript
checkbox勾选判断代码分析
Jun 11 Javascript
javascript中解析四则运算表达式的算法和示例
Aug 11 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
js实现图片上传即时显示效果
Sep 30 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 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
第十二节--类的自动加载
2006/11/16 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
php中namespace use用法实例分析
2016/01/22 PHP
PHP与以太坊交互详解
2018/08/24 PHP
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
Python中使用item()方法遍历字典的例子
2014/08/26 Python
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
python负载均衡的简单实现方法
2018/02/04 Python
代码分析Python地图坐标转换
2018/02/08 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
党日活动总结
2014/05/07 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python