这里有4种在JavaScript中组合字符串的方法。我最喜欢的方法是使用模板字符串。为什么?因为它更具可读性,没有反斜杠转义引号,没有笨拙的空白定界符,也没有令人困惑的加号运算符。consticon='';//模板字符串`hi${icon}`;//join()方法['hi',icon].join('');//Concat()方法''.concat('hi',icon);//+运算符'hi'+icon;//结果//hi1.模板字符串如果您使用过其他语言(例如Ruby),您会熟悉术语字符串插值。这正是模板字符串的目的。这是在字符串创建中包含表达式的简单方法,简洁明了。constname='samantha';constcountry='';(1)模板字符串前的字符串连接中缺少空格的问题,这是我的字符串"Hi,I'm"+name+"andI'mfrom"+country;??你发现我的错误了吗?我错过了一个空间。这是连接字符串时非常常见的问题。//Hi,I'msamanthaandI'mfrom(2)Solvingwithtemplatestrings使用模板字符串,你可以解决这个问题。您可以按照希望字符串出现的方式来编写它。所以很容易发现是否缺少空格,现在超级可读,耶!`嗨,我是${name},来自${country}`;2.join()join方法合并数组的元素并返回一个字符串。因为它适用于数组,所以如果您想添加其他字符串,它会很方便。constinstagram='@samanthaming';consttwitter='@samantha_ming';constarray=['Myhandlesare',instagram,twitter];consttiktok='@samantaming';array.push(tiktok);array.join('');//我的句柄是@samanthaming@samantha_ming@samanthaming自定义分隔符连接的好处是您可以自定义数组元素的组合方式。您可以通过在其参数中传递定界符来做到这一点。constarray=['Myhandlesare'];consthandles=[instagram,twitter,tiktok].join(',');//@samanthaming,@samantha_ming,@samanthamingarray.push(handles);array.join('');//我的句柄是@samanthaming、@samantha_ming、@samanthaming3.concat()使用concat,您可以通过在其上调用一个方法来创建一个新字符串。constinstagram='@samanthaming';consttwitter='@samanthaming';consttiktok='@samanthaming';'Myhandlesare'.concat(instagram,',',twitter',',tiktok);//Myhandlesare@samanthaming,@samantha_ming,@samanthaming组合字符串和数组您还可以使用concat将字符串与数组组合。当我传递数组参数时,它会自动将数组项转换为逗号分隔的字符串。constarray=[instagram,twitter,tiktok];'Myhandlesare'.concat(array);//Myhandlesare@samanthaming,@samantha_ming,@samanthaming如果你想要更好的格式,我们可以使用join来自定义分隔符。constarray=[instagram,twitter,tiktok].join(',');'Myhandlesare'.concat(array);//Myhandlesare@samanthaming,@samantha_ming,@samanthaming4.+operatoraboutusing+operatorwhencombiningstrings关于字符的一件有趣的事情。您可以使用它来创建新字符串,或通过附加到现有字符串来改变它们。(1)Immutable这里我们使用+来创建一个全新的字符串。constinstagram='@samanthaming';consttwitter='@samantha_ming';consttiktok='@samanthaming';constnewString='Myhandlesare'+instagram+twitter+tiktok;(2)变量我们也可以用+=追加到当前那里是字符串。因此,如果出于某种原因,您需要一种更改方式,这可能是您的一个选择。letstring='Myhandlesare';string+=instagram+twitter;//Myhandlesare@samanthaming@samantha_ming哦该死的又忘记了空间。看!连接字符串时很容易漏掉空格。string+=instagram+','+twitter+','+tiktok;//我的handles是@samanthaming,@samantha_ming,@samanthaming还是乱七八糟的,大家一起投稿吧!string+=[instagram,twitter,tiktok].join(',');//Myhandlesare@samanthaming,@samantha_ming,@samanthaming5.字符串中的转义字符当字符串中包含特殊字符时,合并时需要先对这些字符进行转义。让我们看看一些情况,看看如何避免它们(1)转义单引号或撇号(')创建字符串时,可以使用单引号或双引号。知道这一点,当你的字符串中有单引号时,一个非常简单的解决方案是反向创建字符串。consthappy=;["I'm",happy].join('');''.concat("I'm",happy);"I'm"+happy;//RESULT//我的当然,你也可以使用反斜杠\来转义字符。但我觉得它有点难读,所以我不经常这样做。consthappy=;['I\'m',happy].join('');''.concat('I\'m',happy);'I\'m'+happy;//RESULT//I'm由于模板字符串使用的是反引号,本例不适用(2)转义双引号(")与转义单引号类似,我们可以用同样的方法来使用反引号。因此,要转义双引号,我们将使用单引号。constflag='';['Canada"',flag,'"'].join('');''.concat('Canada"',flag,'"');'Canada"'+flag+'"';//RESULT//Canada""是的,也可以使用反斜杠转义符。(3)转义符(`)因为模板字符串使用反引号创建它的字符串,所以当我们要要输出该字符,我们必须用反斜杠将其转义。6.使用哪种方式?我展示了一些使用不同方式连接字符串的示例。哪种方式更好取决于所有情况。关于样式偏好,我喜欢遵循Airbnb风格指南。因此,模板字符串胜出!7.为什么其他方式仍然重要?知道其他方式也很重要。Wh你是这么说的吗?因为不是每个代码库都会遵循这个规则,或者你可能正在处理遗留代码库。作为开发人员,我们需要能够适应和理解我们所处的任何环境。我们是来解决问题的,而不是抱怨技术有多老,除非这种抱怨结合实际行动来改进。那么我们就有进步了
