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

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-07-11   JS  点击:(2)  评论:(0)  加入收藏
如果你订阅了Airbnb 的 JavaScript 风格指南,就会知道最好的方法是使用 "String()"我用他是因为它是最明确的——容易让其他人明白你代码的意图请记住,最好的代码...【详细内容】
2019-07-11   JS  点击:(11)  评论:(0)  加入收藏
JSON语法JSON和XML类型,都是一种结构化的数据表示方式。所以,JSON并不是JavaScript独有的数据格式,其他很多语言都可以对JSON进行解析和序列化。JSON的语法可以表示三种类型的...【详细内容】
2019-07-10   JS  点击:(6)  评论:(0)  加入收藏
区块链作为下一代颠覆性的核心技术,吸引了很多人的关注,区块链的基本概念非常简单:一个分布式数据库维持不断增长的有序记录列表。然而当我们谈论区块链时,我们也会谈论我们用区...【详细内容】
2019-07-04   JS  点击:(8)  评论:(0)  加入收藏
区块链作为下一代颠覆性的核心技术,吸引了很多人的关注,区块链的基本概念非常简单:一个分布式数据库维持不断增长的有序记录列表。然而当我们谈论区块链时,我们也会谈论我们用区...【详细内容】
2019-07-04   JS  点击:(6)  评论:(0)  加入收藏
JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaSc...【详细内容】
2019-07-02   JS  点击:(6)  评论:(0)  加入收藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Hello world</title> </head> <body> <h1>Hello world</h1> <script type="text/javascript&quo...【详细内容】
2019-07-01   JS  点击:(14)  评论:(0)  加入收藏
一,对记录的操作1.创建有json字段的表-- 创建表CREATE TABLE t_json(id INT PRIMARY KEY, sname VARCHAR(20) , info JSON);2.插入记录-- 插入含有json数组的记录INSERT...【详细内容】
2019-06-27   JS  点击:(13)  评论:(0)  加入收藏
谈谈JS中的函数劫持来源:https://jrainlau.github.io/#/article 说到劫持,第一反应可能是什么不好的东西。函数劫持并不邪恶,关键是看使用的人。虽然这个概念在前端领域使用较...【详细内容】
2019-06-20   JS  点击:(8)  评论:(0)  加入收藏
从事前端开发的小伙伴肯定都用过jquery的ajax请求,但如果需要跨域请求,就需要用到jsonp,因为默认的ajax跨域请求会被浏览器拦截,拦截原因是因为支持Javascript的浏览器都会使用...【详细内容】
2019-06-19   JS  点击:(6)  评论:(0)  加入收藏
JavaScript:基本概念:JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于浏览...【详细内容】
2019-06-18   JS  点击:(9)  评论:(0)  加入收藏
一:Virtual DOM(二)在 Virtual DOM 的基础上给 VNode 类添加 render 方法,render 方法把一个虚拟的 DOM 节点渲染成真正的 DOM 节点,例如:const ul = h(&#39;ul&#39;, {id: &#39...【详细内容】
2019-06-17   JS  点击:(8)  评论:(0)  加入收藏
什么是Vue?我认为它是一个通过类似于json的东西来操作html界面的这么一个框架。 jQuery我一直认为是个库,它无非是把js简写了,特别在dom操作上,让你感觉到$布满了代码世界,我不...【详细内容】
2019-06-05   JS  点击:(19)  评论:(0)  加入收藏
一、排序 冒泡排序//冒泡排序function bubbleSort(arr) { for(var i = 1, len = arr.length; i < len - 1; ++i) { for(var j = 0; j <= len - i; ++j) { if (arr[j] > arr[...【详细内容】
2019-05-17   JS  点击:(14)  评论:(0)  加入收藏
有着20年编程经验的资深程序员,以自己多年来的经历,总结出程序员的编程语言切换规律,做了一个主流编程语言的进阶流程图,展示不同编程语言之间的承接关系、程序员选择编程语言...【详细内容】
2019-05-16   JS  点击:(17)  评论:(0)  加入收藏
JavaScript 引用类型所谓引用类型,在ECMAScript中表示一种数据结构,其中有一些数据和方法,在其他语言中大多被称为类,但是在这里我们一般不这样称呼。即使ECMAScript是一门面...【详细内容】
2019-05-15   JS  点击:(14)  评论:(0)  加入收藏
整理《javascript高级程序设计》中继承的方法以及优缺点。1. 原型链ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。原型链继承的基本思想是利用原型让...【详细内容】
2019-05-08   JS  点击:(13)  评论:(0)  加入收藏
前言可能你会很熟练,但名称不一定知道。正文从这开始~~ 让我们谈谈什么是:lambdas(匿名函数)、 first-class functions(头等函数)、higher-order functions(高阶函数)、unary functi...【详细内容】
2019-05-08   JS  点击:(17)  评论:(0)  加入收藏
前言何为技巧,意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺,推动着人类科学技术的发展,同时犹如文字一样承托着人类文化的进步。每写好一篇文章,都...【详细内容】
2019-05-08   JS  点击:(11)  评论:(0)  加入收藏
闭包是函数创建时作用域内所有变量的集合。要使用闭包,需要在另一个函数中创建一个函数,这种函数被称为嵌套函数。内部函数可以访问外部函数作用域中的变量(依靠闭包可以访问外...【详细内容】
2019-05-07   JS  点击:(19)  评论:(0)  加入收藏
推荐资讯
相关文章
栏目更新
栏目热门