VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • JavaScript中将值转换为字符串的五种方法总结

    前言

    如果您关注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()总是一个很好的默认选择👍

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对北冥有鱼的支持。

    您可能感兴趣的文章:

    • js 数字、字符串、布尔值的转换方法(必看)
    • JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
    • js数值和和字符串进行转换时可以对不同进制进行操作
    • JS操作字符串转换为数值并取整的代码
    • 了解在JavaScript中将值转换为字符串的5种方法

    广而告之:
    热门推荐:
    html5跨域通讯之postMessage的用法总结

    postMessagePortal.html 页面代码 复制代码 代码如下: <!DOCTYPE html><title>标题</title><link rel="stylesheet" href="styles.css"><link rel="icon" href="http://apress.com/favicon.ico"><script></p> <p>var targetOr···

    php获取url参数方法总结

    本文实例讲述了php获取url参数方法。分享给大家供大家参考。具体如下: 在php中获取url中参数的方法有很多种,其中最简单的就直接使用parse_url函数了,他可以很方便快速的自动解析url参数与值并保存期到对应的数组中,其它的一种方法基本都是正则表达式来操作了。 parse_url函···

    浅谈angularJS2中的界面跳转方法

    链接参数数组保存路由导航时所需的成分: 指向目标组件的那个路由的路径(path) 必备路由参数和可选路由参数,它们将进入该路由的URL 我们可以把RouterLink指令绑定到一个数组,就像这样: <a [routerLink]="['/heroes']">Heroes</a> 在指定路由参数时,我们写过···

    jQuery层级选择器

    因为DOM的结构就是层级结构,所以我们经常要根据层级关系进行选择。 层级选择器(Descendant Selector) 如果两个DOM元素具有层级关系,就可以用$('ancestor descendant')来选择,层级之间用空格隔开。例如: <!-- HTML结构 --> <div class="testing"> <ul···

    thinkphp的CURD和查询方式介绍

    对数据的读取 Read复制代码 代码如下:$m=new Model('User'); $m=M('User'); select $m->select();//获取所有数据,以数组形式返回 find $m->find($id);//获取单条数据 getField(字段名)//获取一个具体的字段值 $arr=$m->where('id=2')->getField('username')···

    纯CSS实现radio和checkbox实现效果示例

    radio-and-checkbox 纯CSS实现radio和checkbox实现效果 reset-radio 在开发PC端的项目时,经常会用到radio和checkbox组件,可是因为原生的样式相对来说不符合设计师的设计风格,所以我们可能会经常引用第三方的模块去实现,或者通过JS等其他方式去hack。这样相对来说增加了代码···

    mysql 8.0.12 解压版安装教程

    本文为大家分享了mysql 8.0.12 解压版安装教程,供大家参考,具体内容如下 1、首先在官网上下载mysql8.0.12的压缩包:下载地址 2、下载成功后解压到任意目录,比如我的是E:\download\mysql-8.0.12-winx64; 3、配置环境变量,在系统变量path的末尾追加解压后的bin文件夹所在目···

    讲解环绕广告的实现方法

    <div id="new"> <div id="zhan">占位用的空白块</div> <div id="ad">放广告代码</div> [--newstext--]内容标签 </div> CSS部分: #zhan{ float: left; /让块靠左 clear: left; /···

    JavaScript 处理树数据结构的方法示例

    JavaScript 处理树结构数据 场景 即便在前端,也有很多时候需要操作 树结构 的情况,最典型的场景莫过于 无限级分类。之前吾辈曾经遇到过这种场景,但当时没有多想直接手撕 JavaScript 列表转树了,并没有想到进行封装。后来遇到的场景多了,想到如何封装树结构操作,但考虑···

    HTML5 新表单类型示例代码

    demo.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> form { width: 100%; max-wi···