Typescript 中的字符串插值(注入)
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));
现在我们成功地在 typescript 中构建了自己的 stringinject
方法。 我不是自己构建的,我去了 stringinject 包的 github 存储库并更改了该方法,以便它可以与 typescript 一起使用。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供,仅供学习和研究使用。如您对本站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。