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实现仿qq消息的弹出窗效果
Jan 06 Javascript
javascript每日必学之封装
Feb 23 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 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实现用户认证及管理完全源码
2007/03/11 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
python redis存入字典序列化存储教程
2020/07/16 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
Django celery异步任务实现代码示例
2020/11/26 Python
暑期实践思想汇报
2014/01/06 职场文书
四年级科学教学反思
2014/02/10 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
售后服务承诺书模板
2014/05/21 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
房屋维修申请报告
2015/05/18 职场文书