循环遍历数组并编辑字符串

Question

我有这个变量：

WelcomeText = 'Hi $0! Welcome to $1!';

我正在尝试创建此功能：

translate(WelcomeText, 'Daniel', 'Budapest');

哪个应该返回这个：

'Hi Daniel! Welcome to Budapest!'

我试图使这个函数应该支持无限的参数来替换：

export const translator = (str, ...args) => {
  let translate = args.map((item, index) => {
    let stringToReplace = '$' + index;
    let result = str.replace(stringToReplace, item);
    return result;
  });

  console.log(translate);
};

但这给了我这个：

["Hi Daniel! Welcome to $1", "Hi $0! Welcome to Budapest"]

不知道如何解释更多，但我已经无话可说了，所以我希望你能理解我上面的问题:)

我在这里做错了什么，我需要做什么才能达到我想要的结果？

Answer 1

您可以简单地使用 forEach 代替

 let WelcomeText = 'Hi $0! Welcome to $1!'; const translator = (str, ...args) => { args.forEach((item, index) => { let stringToReplace = '$' + index; str= str.replace(stringToReplace, item); }); console.log(str); }; translator(WelcomeText, 'Daniel', 'Budapest');

由于您在原始代码中使用 map ，因此它在每次迭代时返回一个新字符串，并且最终得到一个字符串数组，实际上您需要获取一个字符串，其中所有$ (index) 实例被替换，因此您应该使用下一次迭代的替换字符串

Answer 2

您可以将函数作为替换参数并搜索字符串的索引。

 const translate = (string, ...items) => string.replace(/\\$(\\d+)/g, (_, i) => items[i]), text = 'Hi $0! Welcome to $1!'; console.log(translate(text, 'Daniel', 'Budapest'));

Answer 3

map总是创建一个相同长度的新数组，但你想返回一个字符串。 您可以使用reduce代替文本作为初始值：

 var welcomeText = 'Hi $0! Welcome to $1!'; const translate = (t, ...args) => args.reduce((a, x, i) => a.replace(`$${i}`, x), t); console.log(translate(welcomeText, 'Daniel', 'Budapest'));

Answer 4

问题是Array#map创建了一个array ，所以每个替换都被视为要替换的单独事物，所以首先替换$0并保留$1但下次替换原始字符串时只替换$1但保留$0 。

由于您不需要数组，因此您可以使用Array#forEach每次都保持更新str ：

 const translator = (str, ...args) => { let translate = args.forEach((item, index) => { let stringToReplace = '$' + index; str = str.replace(stringToReplace, item); }); console.log(str); }; const WelcomeText = 'Hi $0! Welcome to $1!'; translator(WelcomeText, 'Daniel', 'Budapest');

或者，您可以使用Array#reduce并使用结果值：

 const translator = (str, ...args) => { let translate = args.reduce((result, item, index) => { let stringToReplace = '$' + index; return result.replace(stringToReplace, item); }, str); console.log(translate); }; const WelcomeText = 'Hi $0! Welcome to $1!'; translator(WelcomeText, 'Daniel', 'Budapest');

您还可以使用String#replace函数作为String#replace参数，这将允许您动态确定替换内容：

 const translator = (str, ...args) => { let translate = str.replace( /\\$(\\d+)/g, //match a pattern that has $ followed by a number, capture the number (match, placeholderNumber) => args[placeholderNumber] //replace with corresponding the value from args ) console.log(translate); }; const WelcomeText = 'Hi $0! Welcome to $1!'; translator(WelcomeText, 'Daniel', 'Budapest');

Answer 5

尝试这个

let name = args[0];
let place = args[1];

let message = 'Hi ${name}, welcome to ${place}`;

Answer 6

我会传递给转换器数组的数组，如下所示：

const welcome = "Hi $0! Welcome to $1!";

const returnString = (str, name, city) =>
  str.replace("$0", name).replace("$1", city);

const translator = (str, arr) => {
  return arr.map(([name, city]) => returnString(str, name, city));
};

console.log(
  translator(welcome, [
    ["John", "NY"],
    ["Sara", "LA"],
    ["Bill", "SF"]
  ])
);

输出： ["Hi John! Welcome to NY!", "Hi Sara! Welcome to LA!", "Hi Bill! Welcome to SF!"]