了解在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 相关文章推荐
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 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高级编程-函数-郑阿奇
2011/07/04 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
下拉框select的绑定示例
2014/09/04 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
python异步任务队列示例
2014/04/01 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
python 计算文件的md5值实例
2017/01/13 Python
Python简单生成随机数的方法示例
2018/03/31 Python
Python模块的加载讲解
2019/01/15 Python
Python玩转Excel的读写改实例
2019/02/22 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
python 项目目录结构设置
2020/02/14 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
实习销售业务员自我鉴定
2013/09/21 职场文书
售后服务承诺函格式
2015/01/21 职场文书
布达拉宫的导游词
2015/02/02 职场文书
复试通知单模板
2015/04/24 职场文书
小学中队委竞选稿
2015/11/20 职场文书
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js