在JavaScript中组合字符串的4种方法

开发 前端
下面是在JavaScript中组合字符串的4种方法。我最喜欢的方法是使用模板字符串。为什么?因为它更具可读性,所以没有转义引号的反斜杠,没有笨拙的空格分隔符,也没有混乱的加号操作符 。

下面是在JavaScript中组合字符串的4种方法。我最喜欢的方法是使用模板字符串。为什么?因为它更具可读性,所以没有转义引号的反斜杠,没有笨拙的空格分隔符,也没有混乱的加号操作符 。

[[335927]]

  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. 为什么其他方式仍然重要?

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

 

责任编辑:赵宁宁 来源: 今日头条
相关推荐

2020-10-16 18:35:53

JavaScript字符串正则表达式

2020-09-03 10:13:49

JavaScript字符串pad

2010-09-02 10:02:17

PHP

2011-07-11 15:36:44

JavaScript

2022-09-22 11:40:11

JavaScript数组开发

2013-01-07 10:44:00

JavaScriptjQueryJS

2019-06-04 15:34:05

WindowsLinuxLinux命令

2022-12-08 15:55:52

JavaScript字符串

2020-06-23 14:51:13

JavaScript字符字符串

2021-11-11 14:50:01

JavaScriptarry编程开发

2018-12-19 19:30:46

JavaScript创建对象前端

2011-07-11 16:00:22

字符串拼接

2020-08-17 09:22:30

字符串子串对象

2015-06-09 14:43:36

javascript操作字符串

2023-08-25 16:37:08

Pandas测试

2009-11-13 16:29:11

ADO.NET连接字符

2010-07-14 16:37:33

SQL Server拆

2019-06-04 11:17:39

Windows Linux命令

2019-03-25 14:00:36

Linux主机名

2019-12-12 20:03:08

PythonC语言编程语言
点赞
收藏

51CTO技术栈公众号