新闻资讯  快讯  焦点  财经  政策  社会
互 联 网   电商  金融  数据  计算  技巧
生活百科  科技  职场  健康  法律  汽车
手机百科  知识  软件  修理  测评  微信
软件技术  应用  系统  图像  视频  经验
硬件技术  知识  技术  测评  选购  维修
网络技术  硬件  软件  设置  安全  技术
程序开发  语言  移动  数据  开源  百科
安全防护  资讯  黑客  木马  病毒  移动
站长技术  搜索  SEO  推广  媒体  移动
财经百科  股票  知识  理财  财务  金融
教育考试  育儿  小学  高考  考研  留学
您当前的位置:首页 > IT百科 > 程序开发 > 语言 > javascript

JS中将值转换成字符串的5种方法

时间:2019-07-11 10:09:37  来源:  作者:
JS中将值转换成字符串的5种方法

 

如果你订阅了Airbnb 的 JAVAScript 风格指南,就会知道最好的方法是使用 "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: Cannot convert a Symbol value to a string

类型错误: 不能把 Symbol 类型的值转换为 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 去把一个值转成字符串,而且这里真的没有强制发生,我主要包括这种方式来完整让你了解可用的所有工具,然后你根据具体情况来挑选使用哪种方式

有个点我要指出来因为你可能没注意,当你使用一个纯字符串格式的值转换出来就会包裹引号

扩展阅读 Kyle Simpson 的 “You Don’t Know JS”: JSON Stringification

关于了解基本原理的重要性

你可能注意到我的代码笔记经常引用 Kyle 的书,我在上面学到了很多东西,我不是来自计算机科学背景,缺乏很多基本概念,他的书让我意识到明白基本原来是多么重要,对于那些想要成为高级工程师的人,真正了解基本原理是提升水平的好方法,否则很难提高。你最终知道了问题在那里,但是如果你知道了基本原理,就会知道为什么从而知道如何去解决,总之,强烈推荐这个系列给那些想成为高级程序员的人!

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

因此对比就留给了 toString 和 String, toString 也执行的不错,一定要注意的一点就是在 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() 处理 undefined 和 null 非常的好 ,不会抛出任何异常。记住我经常说的,你最了解你的程序,因此你应该选择最适合你的方式。

总结

在展示了所有不同的方法如何处理不同类型的值之后,希望你能意识到这些差异并且知道下次处理代码时如何使用,如果你不确认,String()是最好的选择



Tags:JS   点击:()  评论:()
声明:本站部分内容来自互联网,内容观点仅代表作者本人,如有任何版权侵犯请与我们联系,我们将立即删除。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局方式。即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则...【详细内容】
2019-10-10   JS  点击:(1)  评论:(0)  加入收藏
根据最近npm的一项安全性调查显示,77%的受访者对OSS/第三方代码的安全性表示担忧。本文将介绍关于这方面的内容,通过第三方代码引入应用程序的安全漏洞。具体来说,我们考虑被...【详细内容】
2019-10-09   JS  点击:(5)  评论:(0)  加入收藏
在这篇博文中,我们将研究 JavaScript 的全局变量是如何工作的。如: scripts的范围,所谓的全局对象等等。...【详细内容】
2019-10-09   JS  点击:(4)  评论:(0)  加入收藏
源码<script type="text/javascript" charset="utf-8">class DateTransform{ /* dayNum: 天数; startDate: 开始日期 */ constructor (dayNum,startDate) { //将天数转换为...【详细内容】
2019-10-08   JS  点击:(5)  评论:(0)  加入收藏
之前一直写一些动态语言,觉得解析JOSN还是很简单的,往往只需要几行代码就能拿到解析好的JSON对象。Go语言自带的json包可以让你在程序中方便的读取和写入 JSON 数据。生成JSON...【详细内容】
2019-10-08   JS  点击:(4)  评论:(0)  加入收藏
作者:HelloGitHub-kalifun这是 HelloGitHub 推出的《讲解开源项目》[1]系列,今天给大家推荐一个JavaScript 开源的文件上传库项目&mdash;&mdash;FilePond一、介绍1.1 FileP...【详细内容】
2019-09-29   JS  点击:(6)  评论:(0)  加入收藏
JS获取图片原始宽高即图片原始尺寸,我们可以通过HTML5 naturalWidth和naturalHeight属性来获取图片原始尺寸。使用HTML5图像naturalWidth和naturalHeight属性,能够很容易地找...【详细内容】
2019-09-27   JS  点击:(7)  评论:(0)  加入收藏
安装nodejs和yarn的命令:curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repocurl --silent --location https://rpm.no...【详细内容】
2019-09-26   JS  点击:(6)  评论:(0)  加入收藏
你可能刚上手 JavaScript,或者只是曾经偶尔用过。不管怎样,JavaScript 改变了很多,有些特性非常值得一用。 这篇文章介绍了一些特性,在我看来,一个严肃的 JavaScript 开发者每天...【详细内容】
2019-09-26   JS  点击:(6)  评论:(0)  加入收藏
js控制图片放大缩小的效果,可以通过JavaScript的width和height属性来实现。其属性可以实现按比例放大和缩小图像尺寸的功能。推荐参考:《JavaScript教程》 在前面的文章中,也...【详细内容】
2019-09-26   JS  点击:(8)  评论:(0)  加入收藏
深入理解JS引擎的执行机制 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.说说setTimeo...【详细内容】
2019-09-26   JS  点击:(6)  评论:(0)  加入收藏
js解析json数据,可以使用JSON.parse()方法来实现解析。JSON.parse()方法可以解析JSON字符串,转换为 JavaScript 对象。 下面我们就结合简单的代码示例,给大家介绍js解析json数...【详细内容】
2019-09-26   JS  点击:(4)  评论:(0)  加入收藏
什么是SSR其实就是Server Side Render的简称,简单点说就是在服务器端填充数据,渲染页面然后吐到客户端来展示,为啥最近又开始提及服务器端渲染了呢?都是Vue啊,react 等等这些前端...【详细内容】
2019-09-25   JS  点击:(14)  评论:(0)  加入收藏
1.封装hasPubProperty公有属性Object.prototype.hasPubProperty = function (key) { if ((key) in this && !this.hasOwnProperty(key)) { return true; } return false;}复...【详细内容】
2019-09-24   JS  点击:(5)  评论:(0)  加入收藏
来历JSON(JavaScript Object Notation,JavaScript对象表示法)是一种由道格拉斯&middot;克罗克福特构想和设计、轻量级的数据交换语言,该语言以易于让人阅读的文字为基础,用来传输...【详细内容】
2019-09-23   JS  点击:(11)  评论:(0)  加入收藏
我们平时在开发部署 Node.js 应用的过程中,对于应用进程启动的耗时很少有人会关注,大多数的应用 5 分钟左右就可以启动完成,这个过程中会涉及到和集团很多系统的交互,这个耗时...【详细内容】
2019-09-20   JS  点击:(17)  评论:(0)  加入收藏
用JS判断当前屏幕大小尺寸,我们可以通过Window matchMedia() 方法来匹配指定尺寸元素,然后与当前屏幕大小进行判断。 下面我们就结合简单的代码示例,给大家介绍JS判断当前屏...【详细内容】
2019-09-19   JS  点击:(11)  评论:(0)  加入收藏
什么是延时加载?图片延迟加载也称 “懒加载”,通常应用于图片比较多的网页为什么要使用延时加载?假如一个网页中,含有大量的图片,当用户访问网页时,那么浏览器会发送n个图片的请求...【详细内容】
2019-09-19   JS  点击:(13)  评论:(0)  加入收藏
最近整理了下团队新人文档,对团队内使用的框架 riot.js 这部分内容做了一些总结。本文主要在 riot.js 源码 方面,分析一下 riot.js 的执行原理和使用优化。Riot.js 简介Simple...【详细内容】
2019-09-10   JS  点击:(16)  评论:(0)  加入收藏
1.冒泡排序描述: 两两比大小,换位置时间复杂度:O(n&sup2;)bubbleSort(arr) { for (var i = 0; i < arr.length - 1; i++) { //每一次遍历,最大值都会被放在最后的位置,所以不用...【详细内容】
2019-09-09   JS  点击:(15)  评论:(0)  加入收藏
推荐资讯
相关文章
栏目更新
栏目热门