了解在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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
js格式化时间小结
Nov 03 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
如何做到多笔资料的同步
2006/10/09 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
快速查询Python文档方法分享
2017/12/27 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
opencv实现简单人脸识别
2021/02/19 Python
python 决策树算法的实现
2020/10/09 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
读群众路线心得体会
2014/03/07 职场文书
公务员保密承诺书
2014/03/27 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
redis 查看所有的key方式
2021/05/07 Redis