字符串拼接（JavaScript字符串拼接）

字符串拼接（JavaScript字符串拼接）
　　字符串拼接是所有程序设计语言都需要的操作。当拼接结果较长时，如何保证效率就成为一个很重要的问题。本文介绍的是Javascript中的字符串拼接，希望对你有帮助，一起来看。

　　JavaScript字符串拼接

　　const icon='';

　　// 模板字符串

　　`hi ${icon}`;

　　// join() 方法

　　['hi', icon].join(' ');

　　// Concat() 方法

　　''.concat('hi ', icon);

　　// + 操作符

　　'hi ' + icon;

　　// RESULT

　　// hi

　　1. 模板字符串

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

　　const name='samantha';

　　const country='';

　　(1) 字符串连接中缺少空格的问题

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

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

　　 你发现我的错误了吗?我缺少空格。在连接字符串时，这是一个非常普遍的问题。

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

　　(2) 用模板字符串解决

　　使用模板字符串，可以解决此问题。你可以按照你想要的字符串显示方式编写。所以很容易发现是否缺了一个空格，现在超级可读，耶!

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

　　2. join()

　　join 方法合并数组的元素并返回一个字符串。因为它与数组一起使用，所以如果要添加其他字符串，它非常方便。

　　const instagram='@samanthaming';

　　const twitter='@samantha_ming';

　　const array=['My handles are ', instagram, twitter];

　　const tiktok='@samantaming';

　　array.push(tiktok);

　　array.join(' ');

　　// My handles are @samanthaming @samantha_ming @samanthaming

　　自定义分隔符

　　join 的好处在于，你可以自定义组合数组元素的方式。你可以通过在其参数中传递分隔符来实现。

　　const array=['My handles are '];

　　const handles=[instagram, twitter, tiktok].join(', ');

　　// @samanthaming, @samantha_ming, @samanthaming

　　array.push(handles);

　　array.join('');

　　// My handles are @samanthaming, @samantha_ming, @samanthaming

　　3. concat()

　　使用 concat，可以通过在字符串上调用方法来创建新字符串。

　　const instagram='@samanthaming';

　　const twitter='@samantha_ming';

　　const tiktok='@samanthaming';

　　'My handles are '.concat(instagram, ', ', twitter', ', tiktok);

　　// My handles are @samanthaming, @samantha_ming, @samanthaming

　　结合字符串和数组

　　还可以使用 concat 将字符串与数组组合在一起。当我传递数组参数时，它将自动将数组项转换为以逗号分隔的字符串。

　　const array=[instagram, twitter, tiktok];

　　'My handles are '.concat(array);

　　// My handles are @samanthaming,@samantha_ming,@samanthaming

　　果您希望格式更好，我们可以使用 join 来定制分隔符。

　　const array=[instagram, twitter, tiktok].join(', ');

　　'My handles are '.concat(array);

　　// My handles are @samanthaming, @samantha_ming, @samanthaming

　　4. +操作符

　　关于在组合字符串时使用 + 运算符的一件有趣的事情。你可以用来创建新的字符串，也可以通过添加现有字符串来对其进行突变。

　　(1) 非可变

　　在这里，我们使用 + 创建一个全新的字符串。

　　const instagram='@samanthaming';

　　const twitter='@samantha_ming';

　　const tiktok='@samanthaming';

　　const newString='My handles are ' + instagram + twitter + tiktok;

　　(2) 可变的

　　我们还可以使用 +=将其附加到现有字符串中。所以如果出于某种原因，你需要一种改变的方法，这可能是你的一个选择。

　　let string='My handles are ';

　　string +=instagram + twitter;

　　// My handles are @samanthaming@samantha_ming

　　哦，该死的再次忘记了空格。看到了!连接字符串时很容易错过空格。

　　string +=instagram + ', ' + twitter + ', ' + tiktok;

　　// My handles are @samanthaming, @samantha_ming, @samanthaming

　　感觉还是很乱的，我们把 join 扔进去吧!

　　string +=[instagram, twitter, tiktok].join(', ');

　　// My handles are @samanthaming, @samantha_ming, @samanthaming

　　5. 字符串中的转义字符

　　当字符串中包含特殊字符时，组合时首先需要转义这些字符。让我们看一些情况，看看如何避免它们

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

　　创建字符串时，可以使用单引号或双引号。知道了这些知识，当你的字符串中出现单引号时，一个很简单的解决方法就是用相反的方法来创建字符串。

　　const happy=;

　　["I'm ", happy].join(' ');

　　''.concat("I'm ", happy);

　　"I'm " + happy;

　　// RESULT

　　// I'm

　　当然，您也可以使用反斜杠  来转义字符。但是我发现它有点难以阅读，所以我并不经常这样。

　　const happy=;

　　['I'm ', happy].join(' ');

　　''.concat('I'm ', happy);

　　'I'm ' + happy;

　　// RESULT

　　// I'm

　　由于模板字符串正在使用反引号，因此这种情况不适用于它

　　(2) 转义双引号(“)

　　类似于转义单引号，我们可以使用相同的方法来使用相反的引号。因此，为了转义双引号，我们将使用单引号。

　　const flag='';

　　['Canada "', flag, '"'].join(' ');

　　''.concat('Canada "', flag, '"');

　　'Canada "' + flag + '"';

　　// RESULT

　　// Canada ""

　　是的，还可以使用反斜杠转义符。

　　(3) 转义符(`)

　　因为模板字符串使用反引号创建其字符串，所以当要输出该字符时，我们必须使用反斜杠对其进行转义。

　　6. 使用哪种方式?

　　我展示了一些使用不同方式连接字符串的示例。哪种方法更好取决于所有情况。关于样式偏好，我喜欢遵循Airbnb风格指南。

　　因此，模板字符串必胜!

　　7. 为什么其他方式仍然重要?

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

　　上面就是小居数码小编今天给大家介绍的关于（JavaScript字符串拼接）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。

　　94%的朋友还想知道的：

　　PHP数组转字符串教程（php字符串转字节）

　　小白如何快速入门JavaScript（javascript教程）

　　js创建对象的三种方式（javascript中创建对象的三种方法）

　　php随机输出（php随机字符串）



　　155692
 

版权声明：本站所有文章皆为原创，欢迎转载或转发，请保留网站地址和作者信息。

很赞哦！ ()