了解在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获取GridView选择的行内容
Apr 14 Javascript
JavaScript 学习历程和心得分享
Dec 12 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
Seajs的学习笔记
Mar 04 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
Vuex实现购物车小功能
Aug 17 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
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php下使用iconv需要注意的问题
2010/11/20 PHP
服务器web工具 php环境下
2010/12/29 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
Django中的文件的上传的几种方式
2018/07/23 Python
python时间日期操作方法实例小结
2020/02/06 Python
python中adb有什么功能
2020/06/07 Python
python 制作简单的音乐播放器
2020/11/25 Python
python文件路径操作方法总结
2020/12/21 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
房产委托公证书
2014/04/08 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
会议通知范文
2015/04/15 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书