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 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
MooTools 1.2介绍
Sep 14 Javascript
var与Javascript变量隐式声明
Sep 17 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
详解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将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
名片管理系统python版
2018/01/11 Python
pandas.cut具体使用总结
2019/06/24 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
python中property和setter装饰器用法
2019/12/19 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
Django视图、传参和forms验证操作
2020/07/15 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
一道Delphi面试题
2016/10/28 面试题
房屋租赁协议书
2014/04/10 职场文书
促销活动计划书
2014/05/02 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
在人间读书笔记
2015/06/30 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL