了解在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 相关文章推荐
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
JS如何监听div的resize事件详解
Dec 03 Javascript
javascript Number 与 Math对象的介绍
Nov 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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
全面解析JavaScript中“&&”和“||”操作符(总结篇)
2016/07/18 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
如何在sublime编辑器中安装python
2020/05/20 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
C语言编程题
2015/03/09 面试题
酒店服务实习自我鉴定
2013/09/22 职场文书
大学应届毕业生个人求职信
2013/09/23 职场文书
公司财务自我评价分享
2013/12/17 职场文书
物业消防安全责任书
2014/07/23 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
小学生教师节广播稿
2015/08/19 职场文书
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers