了解在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插件制作 图片走廊 gallery
Aug 17 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
js逆向解密之网络爬虫
May 30 Javascript
微信小程序实现签字功能
Dec 23 Javascript
JS实现无限轮播无倒退效果
Sep 21 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逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
生成二维码方法汇总
2014/12/26 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
Python随机生成手机号、数字的方法详解
2017/07/21 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
销售员个人求职的自我评价
2014/02/10 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
创业融资计划书
2014/04/25 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
2014年路政工作总结
2014/12/10 职场文书
校本培训个人总结
2015/02/28 职场文书
贷款收入证明格式
2015/06/24 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
Log4j.properties配置及其使用
2021/08/02 Java/Android
MySQL主从切换的超详细步骤
2022/06/28 MySQL