|
|
51CTO旗下网站
|
|
移步端
  • 在JavaScript官方结成字符串的4种办法

    下是在JavaScript官方结成字符串的4种办法。我最喜欢的主意是采取模板字符串。为什么?因为他更具可读性,故此没有转义引号的暴动斜杠,没有笨拙的空格分隔符,也没有混乱的加号操作符 。

    笔者:做工程师不做码农 来源:当日第一| 2020-08-01 16:19

    下是在JavaScript官方结成字符串的4种办法。我最喜欢的主意是采取模板字符串。为什么?因为他更具可读性,故此没有转义引号的暴动斜杠,没有笨拙的空格分隔符,也没有混乱的加号操作符 。

          
    1. const icon = ''
    2.  
    3. // 模板字符串 
    4. `hi ${icon}`; 
    5.  
    6. // join() 办法 
    7. ['hi', icon].join(' '); 
    8.  
    9. // Concat() 办法 
    10. ''.concat('hi ', icon); 
    11.  
    12. // + 操作符 
    13. 'hi ' + icon; 
    14.  
    15. // RESULT 
    16. // hi  

    1. 模板字符串

    如果你来自另一种语言(例如Ruby),则将熟悉字符串插值一词。这正是模板字符串要贯彻的对象。这是在字符串创建中包含表达式的一种简易方法,该方法简洁明了。

          
    1. const name = 'samantha'
    2. const country = ''

    (1) 字符串连接中缺乏空格的题材

    在模板字符串之前,这是我之字符串的结果

          
    1. "Hi, I'm " + name + "and I'm from " + country; 

    ☝️ 你发现我之错误了吗?我缺乏空格。在过渡字符串时,这是一番奇异广泛的题材。

          
    1. // Hi, I'm samanthaand I'm from  

    (2) 用模板字符串解决

    采用模板字符串,可以解决此问题。你可以按照你想要的字符串显示方式编写。故此很容易发现是否缺了一番空格,如今超级可读,耶!

          
    1. `Hi, I'm ${name} and I'm from ${country}`; 

    2. join()

    join 办法合并数组的要素并返回一个字符串。因为他与数组一起使用,故此如果要补其他字符串,他特殊富有。

          
    1. const instagram = '@samanthaming'
    2. const twitter = '@samantha_ming'
    3. const array = ['My handles are ', instagram, twitter]; 
    4.  
    5. const tiktok = '@samantaming'
    6.  
    7. array.push(tiktok); 
    8.  
    9. array.join(' '); 
    10.  
    11. // My handles are @samanthaming @samantha_ming @samanthaming 

    自定义分隔符

    join 的功利在于,你可以自定义组合数组元素的措施。你可以通过在伊参数中传递分隔符来促成。

          
    1. const array = ['My handles are ']; 
    2. const handles = [instagram, twitter, tiktok].join(', ');  
    3. // @samanthaming, @samantha_ming, @samanthaming 
    4.  
    5. array.push(handles); 
    6.  
    7. array.join(''); 
    8.  
    9. // My handles are @samanthaming, @samantha_ming, @samanthaming 

    3. concat()

    采用 concat,可以通过在字符串上试用方法来创造新字符串。

          
    1. const instagram = '@samanthaming'
    2. const twitter = '@samantha_ming'
    3. const tiktok = '@samanthaming'
    4.  
    5. 'My handles are '.concat(instagram, ', ', twitter', ', tiktok); 
    6.  
    7. // My handles are @samanthaming, @samantha_ming, @samanthaming 

    重组字符串和数组

    还可以运用 concat 名将字符串与数组组合在总共。顶我传递数组参数时,他将机关将数组项转换为以逗号分隔的字符串。

          
    1. const array = [instagram, twitter, tiktok]; 
    2.  
    3. 'My handles are '.concat(array); 
    4.  
    5. // My handles are @samanthaming,@samantha_ming,@samanthaming 

    结果您希望格式更好,咱们可以运用 join 来定制分隔符。

          
    1. const array = [instagram, twitter, tiktok].join(', '); 
    2.  
    3. 'My handles are '.concat(array); 
    4.  
    5. // My handles are @samanthaming, @samantha_ming, @samanthaming 

    4. +操作符

    关于在重组字符串时采用 + 运算符的一件有趣的作业。你可以用来创造新的字符串,也得以通过添加现有字符串来对他进行突变。

    (1) 非可变

    在此间,咱们采用 + 创造一个崭新的字符串。

          
    1. const instagram = '@samanthaming'
    2. const twitter = '@samantha_ming'
    3. const tiktok = '@samanthaming'
    4.  
    5. const newString = 'My handles are ' + instagram + twitter + tiktok; 

    (2) 可变的

    咱们还可以运用 += 名将他附加到现有字符串中。故此如果出于某种原因,你需要一种转移的主意,这可能是你的一个摘取。

          
    1. let string = 'My handles are '
    2.  
    3. string += instagram + twitter; 
    4.  
    5. // My handles are @samanthaming@samantha_ming 

    哦,该死的再次忘记了空格。观看了!联网字符串时很容易错过空格。

          
    1. string += instagram + ', ' + twitter + ', ' + tiktok; 
    2. // My handles are @samanthaming, @samantha_ming, @samanthaming 

    感觉还是很乱的,咱们把 join 扔进去吧!

          
    1. string += [instagram, twitter, tiktok].join(', '); 
    2. // My handles are @samanthaming, @samantha_ming, @samanthaming 

    5. 字符串中的转义字符

    顶字符串中包含特殊字符时,重组时首先需要转义这些字符。让咱看有的状态,探望如何避免它们

    (1) 转义单引号或撇号(’)

    创造字符串时,可以运用单引号或双引号。了解了那些知识,顶你的字符串中出现单引号时,一度很简单的消灭办法就是用相反的主意来创造字符串。

          
    1. const happy = ; 
    2.  
    3. ["I'm ", happy].join(' '); 
    4.  
    5. ''.concat("I'm ", happy); 
    6.  
    7. "I'm " + happy; 
    8.  
    9. // RESULT 
    10. // I'm  

    当然,您也得以运用反斜杠 \ 来转义字符。但是我发现他有点难以阅读,故此我并不经常这样。

          
    1. const happy = ; 
    2.  
    3. ['I\'m ', happy].join(' '); 
    4.  
    5. ''.concat('I\'m ', happy); 
    6.  
    7. 'I\'m ' + happy; 
    8.  
    9. // RESULT 
    10. // I'm  

    出于模板字符串正在采取反引号,故此这种情景不适用于他

    (2) 转义双引号(“)

    类似于转义单引号,咱们可以运用相同的主意来行使相反的句号。故此,为了转义双引号,咱们将采用单引号。

          
    1. const flag = ''
    2.  
    3. ['Canada "', flag, '"'].join(' '); 
    4.  
    5. ''.concat('Canada "', flag, '"'); 
    6.  
    7. 'Canada "' + flag + '"'; 
    8.  
    9. // RESULT 
    10. // Canada "" 

    科学,还可以运用反斜杠转义符。

    (3) 转义符(`)

    因为模板字符串使用反引号创建其字符串,故此当要出口该字符时,咱们必须采取反斜杠对他进行转义。

    6. 采用哪种方式?

    我展示了部分用到不同方式连接字符串的示范。哪种方法更好取决于所有情况。关于样式偏好,我喜欢遵循Airbnb作风指南。

    故此,模板字符串必胜!

    7. 为什么其他艺术仍然第一?

    了解其他的主意也还是很重大的。为什么这么说呢?因为并不是每个代码库都会遵循这个规则,或者你可能面对的是一番遗留代码库。表现一个开发者,咱们需要能够适应和了解我们所处的其他环境。咱们是来解决问题的,而不是抱怨技术有多老 除非这种抱怨是配合实际行动来改善的。那我们就有提高

    【编纂推荐】

    1. JavaScript中的缓存API
    2. 该署前端开发必不可少的战斗力工具
    3. PyTorch1.6:新增自动混合精度训练、Windows版开发维护权移交微软
    4. 回答一下这 10 个最广泛的 Javascript 题材
    5. 决不能只会敲代码:付出人员必备之7种基本非技术技能
    【义务编辑: 赵宁宁 TEL:(010)68476606】

    点赞 0
  • JavaScript  字符串  付出
  • 分享:
    大家都在看
    猜你喜欢
  • 订阅专栏+更多

    大数据安全运维实战

    大数据安全运维实战

    CDH+Ambari
    共20章 | 数据陈浩

    91人口订阅学习

    实操老:Jenkins接轨交付和后续部署

    实操老:Jenkins接轨交付和后续部署

    微服务架构下的无部署
    共18章 | freshman411

    185人口订阅学习

    思科交换网络安全指南

    思科交换网络安全指南

    安全才能无忧
    共5章 | 思科小牛

    110人口订阅学习

    订阅51CTO邮刊

    点击这里查看样刊

    订阅51CTO邮刊

    51CTO劳务号

    51CTO官微

  •     
  •