了解在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 类似flash效果的立体图片浏览器
Feb 08 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 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
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
js技巧--转义符"\"的妙用
2007/01/09 Javascript
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
JS实现的缓冲运动效果示例
2018/04/30 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
vue离开当前页面触发的函数代码
2020/09/01 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
python判断输入日期为第几天的实例
2018/11/13 Python
python线程池如何使用
2020/05/28 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
详解Python模块化编程与装饰器
2021/01/16 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
好家长事迹材料
2014/01/23 职场文书
九年级政治教学反思
2014/02/06 职场文书
小学校本培训方案
2014/06/06 职场文书
学习礼仪心得体会
2014/09/01 职场文书
专业见习报告范文
2014/11/03 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书