交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 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种方法

    广而告之:
    热门推荐:
    Dreamweaver怎么使用命令检查站点链接的范围?

    Dreamweaver中想要检查站点链接的范围,该怎么检查呢?下面我们就来啊看看详细的教程。 软件名称: Adobe dreamweavercs5 (免激活)简体中文破解绿色免费版 软件大小: 87.67MB 更新时间: 2016-09-14 1、首先,我们点击菜单栏上方的站点小命令。 2、接下来我们会看到二级···

    浅谈CSS的Display属性可能的值

    none 此元素不会被显示。 block 此元素将显示为块级元素,此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素,元素前后没有换行符。 inline-block 行内块元素。(CSS2.1 新增的值) list-item 此元素会作为···

    基于原生js淡入淡出函数封装(兼容IE)

    在开发的过程中,我们要做淡入淡出效果的话,我们完全可以使用jQuery的fadeTo()方法。但是我们的目的不只是会用,而是理解程序底层的逻辑。这篇文章主要就是利用原生的javascript实现淡入淡出的效果。 构建框架,基本没难度。 <!DOCTYPE html> <html> <he···

    IE6,IE7下js动态加载图片不显示错误

    先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" onclick="switch_image('1.jpg')"><img src="1.thumb.jpg" /></a> 这么多小的缩略图标签循环平铺下来,当单击小的图片时,动态加载大的图···

    asp.net下的异步加载

    具体我本身大概用的就有两种,需配合JQ. 第一种,直接通过AJAX去请求页面:例如, 1:dataType必须是html或者Text格式, 2:Type:必须是'Post'请求 3:后台Load事件必须判断是否为Post请求      后台代码如下: 测试结果如下:      第二种:类似于.net MVC直接请求方···

    详解vue-cli项目中怎么使用mock数据

    前言 注意:网上很多教程说需要在build目录下的dev-server.js文件中配置,但目前最新的vue-cli是没有dev-server.js这个文件的,因为已经被合并到webpack.dev.conf.js文件中,所以直接在该文件中配置即可 步骤 1、在根目录新建一个mock文件夹用于存在所有用于数据测试的.json文···

    ORACLE数据库逐步解决ORA-12541、ORA-01034和ORA-27101、ORA-00119和ORA00132的过程

    刚开始时,有一台服务器的ORACLE 11G数据库连接不上,报错:ORA-12541:TNS:无监听程序 重启服务里面的两个Oracle服务,都没解决。 在网上看到一篇文章说另一种可能是oracle目录目录下listener.log日志文件过大(达到4G,据说这是oracle在windows系统下的bug)导致的。 搜索找到···

    网站SEO优化的关键词密度怎么布局才算合理

    近日,在和群友讨论的时候发现一个问题,好像大家还在关注关键词的密度,总是对关键词密度的多少耿耿于怀。有的SEO站长坚持按照2%-8%的比例来,有的则认为无所谓,只要能做上排名多少密度都行,也有很多人认为合理的关键词密度就是SEO优化的精髓,无所谓是2%还是8%。那么,到···

    JS实现判断有效的数独算法示例

    本文实例讲述了JS实现判断有效的数独算法。分享给大家供大家参考,具体如下: 判断一个 9x9 的数独是否有效。只需要根据以下规则,验证已经填入的数字是否有效即可。 1.数字 1-9 在每一行只能出现一次。 2.数字 1-9 在每一列只能出现一次。 3.数字 1-9 在每一个以粗实线分隔的 ···

    js图片翻书效果代码分享

    这是一款基于javascript实现图片翻书效果代码,图片可以从左右两个方向进行切换,用户还可以自定义对应图片的标题与文字说明,是一款非常实用的图片特效源码。 七夕情人节也可以是表白的神器,放一些回忆的照片,还可以永久保存,是不是很有心意,推荐给大家,有需要的小伙伴可···