我要投稿

了解 JavaScript 中的标记模板文字

资讯主编 JavaScript

2024-08-07 0 614

什么是标记模板文字？

带标签的模板文字涉及以函数为前缀的模板文字，称为标签。该函数可以处理和操作文字的内容。这是一个简单的例子：

function tag(strings, ...values) {
    console.log(strings);
    console.log(values);
    return 'processed string';
}

const name = 'alice';
const greeting = tag`hello, ${name}! how are you?`;
console.log(greeting);

标记模板文字的用例

国际化（i18n）

带标签的模板文字可以根据用户的区域设置动态翻译字符串。这是使用日语的示例：

function i18n(strings, ...values) {
    const translations = {
        'hello, ': 'こんにちは、',
        '! how are you?': '！元気ですか？',
    };

    return strings.reduce((result, str, i) =&gt; result + translations[str] + (values[i] || ''), '');
}

const name = 'アリス';
const greeting = i18n`hello, ${name}! how are you?`;
console.log(greeting); // output: "こんにちは、アリス！元気ですか？"

2. 自定义字符串格式

他们还可以实现自定义格式化逻辑，例如转义 html。

function escapehtml(strings, ...values) {
    const escape = (str) =&gt; str.replace(/&amp;/g, '&amp;').replace(/, '/g, '&gt;');
    return strings.reduce((result, str, i) =&gt; result + str + escape(values[i] || ''), '');
}

const userinput = '<scrIPt>alert("XSS")</script>';
const sanitized = escapeHTML`user input: ${userInput}`;
console.log(sanitized); // Output: "User input: <script>alert("XSS")</script>"

结论

标记模板文字为 Javascript 中的动态字符串操作提供了多功能工具。它们可以简化国际化和自定义字符串格式等任务，从而产生更具表现力和可维护的代码。

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在

免责声明
1. 本站所有资源来源于用户上传和网络等，如有侵权请邮件联系本站整改team@lcwl.fun！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系本站工作人员处理！
6. 本站资源售价或VIP只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压，如遇到无法解压的请联系管理员！
8. 因人力时间成本问题，部分源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别！
9.本站所有源码资源都是经过本站工作人员人工亲测可搭建的，保证每个源码都可以正常搭建，但不保证源码内功能都完全可用，源码属于可复制的产品，无任何理由退款！

网站搭建学习网 JavaScript 了解 JavaScript 中的标记模板文字 https://www.xuezuoweb.com/9815.html