使用一些数组元素连接字符串（Javascript）答案

【问题标题】：Concatenate Strings using some array elements (Javascript)使用一些数组元素连接字符串（Javascript）
【发布时间】：2018-09-30 13:28:39
【问题描述】：

如何通过连接文字字符串和数组元素来形成字符串变量

我试过这个：

var stringTing = '<a href="www.' + arr[0] + '.com/' + otherArr[0] + '"';

我正在尝试实现的使用此概念的实际代码：

var handles = tmpStr.match(reg);    

for (var i = 0; i < handles.length;i++) {
    tmpStr.replace(handles[i], '<a href="www.instagram.com/' + handles[i].replace('@','') + '>' + handles[i] + '</a>');
    console.log(tmpStr);
}

【问题讨论】：

标签： javascript arrays string concatenation

【解决方案1】：

String#replace 不会改变字符串（因为它是一个原始值）。相反，它返回一个新字符串，因此您必须将其分配回tmpStr，这可能会导致其他问题，因为您正在使用循环替换子字符串。

另外，你为什么要匹配 handlers 然后再次遍历字符串来替换匹配项？一口气搞定（使用replace 加上一个正则表达式和一个回调），保证不会导致上述问题：

tmpStr = tmpStr.replace(reg, function(match) {
    return '<a href="www.instagram.com/' + match.replace('@','') + '>' + match + '</a>';
});

注意：

要匹配所有出现，正则表达式reg 应该有全局修饰符g。

说明：

String#replace 有两种用法：一种使用字符串，另一种使用正则表达式。对于后者，您可以将以下任一参数作为第二个参数传递：

简单字符串： 将替换所有匹配项。仅当您不希望更改是动态的（取决于匹配项）时才有用。

var str = "Hello yo! Can yo do this?";
console.log("BEFORE: " + str);

str = str.replace(/yo/g, "you");

console.log("AFTER : " + str);

Special string: 这是一个包含一些特殊替换模式的字符串，例如 $& 表示整个匹配，$n 表示第 n^th 匹配组，... 这比上面的简单（静态）字符串灵活得多。

var str = "Hello yo10! Can yo50 do this? Or will yo2018 be there?";
console.log("BEFORE: " + str);

str = str.replace(/yo(\d+)/g, "'The whole match is: $&, and the number is: $1'");

console.log("AFTER : " + str);

Function (callback): 类似于特殊字符串，但不是传递带有替换模式的字符串，而是传递一个函数，该函数接受整个匹配项和匹配组作为参数，并且替换将是此函数返回的任何内容。这提供了比特殊字符串更大的灵活性，因为您可以对匹配执行更多逻辑。

var str = "Hello yo10! Can yo50 do this? Or will yo2018 be there?";
console.log("BEFORE: " + str);

str = str.replace(/(yo)(\d+)/g, function(wholeMatch, groupThatContainsTheYo, groupThatConatinsTheNumber) {
    var newNumber = Number(groupThatConatinsTheNumber);
    if(newNumber < 30) {
        newNumber = 0;
    } else {
        newNumber = 1;
    }

    return groupThatContainsTheYo.toUpperCase() + "-" + newNumber;
});

console.log("AFTER : " + str);

上述所有方法将分别应用于每个匹配项。例如，如果有 3 个匹配项，则该函数将被调用 3 次，每个匹配项调用一次，每次调用的返回值将替换当前匹配项。这同样适用于特殊字符串。

示例：

var tmpStr = "Hello @world! You like @me?",
    reg = /@[a-z]+/gi;

console.log("Before: " + tmpStr);

tmpStr = tmpStr.replace(reg, function(match) {
    return '<a href="www.instagram.com/' + match.replace('@','') + '>' + match + '</a>';
});

console.log("After: " + tmpStr);

【讨论】：

我很困惑函数似乎知道它的“匹配”参数是正则表达式中的匹配项之一，以及它如何知道循环遍历正则表达式中的所有匹配项。你能向我解释一下这个概念吗？
@forestaker 我添加了一个简单的解释。我希望这很清楚。您可以在MDN 上阅读有关String#replace 的更多信息。另外，根据您的需要，您可以使用 special string 而不是 function 以使代码更短。

【解决方案2】：

发生这种情况是因为您没有重新分配 tmpStr。 tmpStr.replace 不会改变 tmpStr，它会返回一个新字符串。

只需重新分配：

var handles = tmpStr.match(reg);    

for (var i = 0; i < handles.length;i++) {
    tmpStr = tmpStr.replace(handles[i], '<a href="www.instagram.com/' + handles[i].replace('@','') + '>' + handles[i] + '</a>');
    console.log(tmpStr);
}

【讨论】：