JavaScript中将值转换为字符串的五种方法总结


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 Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
原生js实现弹窗消息动画
Nov 20 Javascript
详解Vue 如何监听Array的变化
Jun 06 #Javascript
js常见遍历操作小结
Jun 06 #Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 #Javascript
vue中的过滤器实例代码详解
Jun 06 #Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 #Javascript
原生js通过一行代码实现简易轮播图
Jun 05 #Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 #Javascript
You might like
php定时计划任务的实现方法详解
2013/06/06 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
PHP7.0版本备注
2015/07/23 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
javascript 写类方式之七
2009/07/05 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
AngularJS中的作用域实例分析
2018/05/16 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
一个超级简单的python web程序
2014/09/11 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
python实现简单多人聊天室
2018/12/11 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
python树莓派红外反射传感器
2019/01/21 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
星空联盟C# .net笔试题
2014/12/05 面试题
学院书画协会部门职责
2013/11/28 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
质量整改报告范文
2014/11/08 职场文书
关于召开会议的通知
2015/04/15 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电