遍历数组和编辑字符串

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

尝试一下

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

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

Answer 4

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 5

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

由于结果不需要数组，因此可以使用$0每次都不断更新Array#forEach：

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用作替代参数，这将使您能够动态确定将进行的替代：

Array#reduce

Answer 6

我将传递给数组的翻译器数组，如下所示：

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