javascript - 从字符串模板获取通配符名称

Question

是否有一种快速方法(我的意思是已知的方法)从字符串模板中获取通配符名称？，例如...

const str = `Hello ${name}, today is ${weekday}!`;
getWildCards(str); // will return ['name', 'weekday']

我正在创建一个翻译工具，translation 函数不会提前知道通配符。

Answer 1

编辑:

实际上，事实证明有一种 native 方法可以使用tagged template literals从模板文字中提取参数。 ，它允许您使用以下形式的函数解析模板文字:

function tag(strings, param1, param2, ..., paramN) { ... }

因此，如果不是在模板文字 (${ foo }) 的表达式中使用变量，而是使用字符串 (${ 'foo' })，那么如果你这样做:

tag`${ 'a' }${ 'b' } - XXX ${ 'c' }`

strings 将是 ['', '', ' - XXX ', ''] 并且您将收到 3 个参数，其值为 'a'、'b' 和 'c'。

您可以从标签函数返回任何您想要的内容，因此对于您的用例来说，一个好的解决方案是返回一对 [paramsList,closure]，其中闭包将是一个接收一个对象(映射)，其参数在原始字符串文字中使用，并使用它们来构建结果字符串。像这样:

function extractParams(strings, ...args) {
  return [args, dict => {   
    return strings[0] + args
      .map((arg, i) => dict[arg] + strings[i + 1]).join('');
  }];
}

const [params, translate] = extractParams`Hello ${ 'name' }, today is ${ 'weekday' }`;

console.log(params);
console.log(translate({ name: 'Foo', weekday: 'Barday' }));

原始答案:

假设模板字符串被包装到一个函数中，这样它就不会抛出ReferenceError，并且您稍微更改了模板字符串的格式，以便使用的参数始终是来自一个对象，你可以使用 proxy为此:

假设你有这样的东西:

function getSentence(key, args = {}) {
  // Note that for the proxy solution to work well, you need to wrap each of them
  // individually. Otherwise you will get a list of all the params from all the
  // sentences.

  const sentences = {
      salutation: (args) => `Hello ${ args.name }, today is ${ args.weekday }!`,
      weather: (args) => `Today is ${ args.weather } outside.`,
  };

  return sentences[key](args) || '';
}

function extractParams(key) {
  const params = [];
  
  const proxy = new Proxy({}, {
    get: (target, name) => {
      params.push(name);
    },
  });
  
  getSentence(key, proxy);
  
  return params;
}

console.log(extractParams('salutation'));

无论如何，请注意，只有当您的参数中只有一层深度时，这才有效，否则您将需要一个返回另一个代理的代理，该代理返回另一个代理...并跟踪路径(prop.子属性...)。它们还应该返回一个函数，该函数为将在结果字符串中插入的最后一个属性返回一个字符串。

function getSentence(key, args = {}) {
  // Note that for the proxy solution to work well, you need to wrap each of them
  // individually. Otherwise you will get a list of all the params from all the
  // sentences.

  const sentences = {
      salutation: (args) => `Hello ${ args.name }, today is ${ args.a.b.c.d }!`,
      weather: (args) => `Today is ${ args.weather } outside.`,
  };

  return sentences[key](args) || '';
}

function getProxy(params, path = []) {
  return new Proxy({}, {
    get: (target, name) => {
      if (typeof name === 'symbol') {
        params.push(path);
        
        return () => ''; // toString();
      } else {
        return getProxy(params, path.concat(name));
      }
    },
  });
}

function extractParams(key) {
  const params = [];
  
  getSentence(key, getProxy(params));
  
  return params;
}

console.log(extractParams('salutation'));