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 相关文章推荐
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 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 获取远程网页内容的函数
2009/09/08 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
js登录弹出层特效
2014/03/07 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
最大K个数问题的Python版解法总结
2016/06/16 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
pyqt5实现登录界面的模板
2020/05/30 Python
Python对象转换为json的方法步骤
2019/04/25 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
存储过程和函数的区别
2013/05/28 面试题
EntityManager都有哪些方法
2013/11/01 面试题
关于赌博的检讨书
2014/01/24 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
公路绿化方案
2014/05/12 职场文书
理想演讲稿范文
2014/05/21 职场文书
应届大学生求职信
2014/07/20 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书