如何在Shopware 6前端的JavaScript代码中访问翻译片段？

Shopware 6 有官方原生的前端访问翻译片段的方案，完全符合核心开发最佳实践，不需要自定义hack实现，常用的有3种实现方式，按场景选择：

1. Storefront 插件内直接调用（最常用，核心代码广泛使用） #

所有继承自Shopware原生Plugin基类的Storefront前端插件，都内置了snippet实例工具，直接调用get方法传入翻译key即可：

// 示例：插件内读取翻译
const confirmText = this.snippet.get('plugin.my-plugin.confirm.text');

不需要额外配置，只要对应的翻译片段已经在系统中注册即可。

2. 全局JS上下文调用 #

如果你的代码没有写在Storefront插件里，可以直接调用全局挂载的翻译对象，只需要提前在翻译定义文件中给需要前端访问的翻译项添加frontend="true"属性：

<!-- 翻译定义文件示例 -->
<snippet key="plugin.my-plugin.modal.title" value="提交确认" frontend="true"/>

配置后在任意JS代码中直接读取全局对象即可：

const modalTitle = window.snippets['plugin.my-plugin.modal.title'];

3. 组件专属翻译通过data属性传递 #

如果翻译仅用于单个DOM组件，不需要全局暴露，核心团队也经常使用data属性传递的方案，也就是你最初想到的实现思路：

<!-- Twig模板中给DOM绑定翻译 -->
<div class="custom-component"
     data-component-success-text="{{ 'plugin.custom-component.success.tip'|trans }}">
</div>

JS中读取对应dataset即可：

const component = document.querySelector('.custom-component');
const successTip = component.dataset.componentSuccessText;

内容的提问来源于stack exchange，提问作者Alex