Typescript 中的字符串插值（注入）

TypeScript 5月前 71

const info = "My name is {0} and I live in {1}";

当我们可以从数组或对象中注入字符串时，看起来不是很好吗？在本文中，我将展示如何使用 TypeScript 实现字符串插值。

我长期为我的 javascript 项目使用 stringinject npm 包。 stringinject 提供的功能是我们可以用数组或对象替换对象文字。我们可以在 javascript 中毫无问题地使用它。

在字符串中注入数组

const string = stringInject("This is a {0} string for {1}", ["test","stringInject"]);

在字符串中注入对象

const string = stringInject("My username in {username} on {platform}",{"username":"admin","platform":"火焰兔"});

如上所示，我们可以简单地安装并使用它来注入字符串。

那有什么问题呢？

当我们开始使用 Typescript 时，实际问题就开始了。这个包没有 typescript 定义。许多人建议使用字符串文字方法，这显然很好，但我想要的不止于此。花点时间做研究，解决方案如下

使用typescript注入字符串

export const stringInject = (str: string, data: any) => {
    if ((data instanceof Array)) {
      return str.replace(/({\d})/g, (i) =>
        // @ts-ignore
        data[i.replace(/{/, "").replace(/}/, "")]);
    } else if ((data instanceof Object)) {
  
      if (Object.keys(data).length === 0) {
        return str;
      }
      // tslint:disable-next-line:forin
      for (const _index in data) {
        return str.replace(/({([^}]+)})/g, (i) => {
          const key = i.replace(/{/, "").replace(/}/, "");
          if (!data[key]) {
            return i;
          }
  
          return data[key];
        });
      }
    } else if (!(data instanceof Array)) {
  
      return str;
    } else {
  
      return false;
    }
  };
  const stringForArray = 'My name is {0} and platform {1}';
  const stringForObject = 'My name is {username} and platform {platform}';
  const arrayInfo = ['Admin','Medium'];
  const objectInfo = {username: 'Admin', platform: 'Medium'};

  console.log(stringInject(stringForArray, arrayInfo));
  console.log(stringInject(stringForObject, objectInfo));