Skip to content

Commit 5c8eacd

Browse files
kazuponkazupon
authored
feat(message-compiler): support escape sequence (#2394)
* feat(message-compiler): support escape sequence * docs: fix dead links
1 parent 5d51344 commit 5c8eacd

19 files changed

Lines changed: 849 additions & 35 deletions

File tree

‎docs/guide/essentials/syntax.md‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,55 @@ The following characters used in the message format syntax are processed by the
324324
- `$`
325325
- `|`
326326

327-
If you want to use these characters, you will need to use the [Literal interpolation](#literal-interpolation).
327+
If you want to use these characters, you can use the [Literal interpolation](#literal-interpolation) or **escape sequences**.
328+
329+
### Escape Sequences
330+
331+
:::tip NOTE
332+
Escape sequences are supported from v12 onwards.
333+
:::
334+
335+
You can escape special characters with a backslash (`\`) prefix, similar to escape sequences in C:
336+
337+
| Escape | Result | Description |
338+
|--------|--------|-------------|
339+
| `\{` | `{` | Literal open brace |
340+
| `\}` | `}` | Literal close brace |
341+
| `\@` | `@` | Literal at sign |
342+
| `\|` | `\|` | Literal pipe |
343+
| `\\` | `\` | Literal backslash |
344+
345+
For example, the following locale messages resource:
346+
347+
```js
348+
const messages = {
349+
en: {
350+
address: '{account}\\@{domain}',
351+
braces: 'hello \\{world\\}',
352+
choices: 'option A \\| option B'
353+
}
354+
}
355+
```
356+
357+
The following is an example of the use of `$t` in a template:
358+
359+
```html
360+
<p>{{ $t('address', { account: 'foo', domain: 'domain.com' }) }}</p>
361+
<p>{{ $t('braces') }}</p>
362+
<p>{{ $t('choices') }}</p>
363+
```
364+
365+
As result the below:
366+
367+
```html
368+
<p>foo@domain.com</p>
369+
<p>hello {world}</p>
370+
<p>option A | option B</p>
371+
```
372+
373+
:::tip NOTE
374+
A backslash followed by a character that is not a special character is treated as a literal backslash. For example, `\n` in a message remains as `\n` (backslash + n), not a newline.
375+
:::
328376

329377
## Rails i18n format
330378

‎docs/jp/guide/advanced/composition.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const { t } = useI18n() // [!code ++]
6262

6363
`<script setup>` の先頭で `useI18n` を呼び出す必要があります。
6464

65-
`useI18n` は Composer インスタンスを返します。Composer インスタンスは、VueI18n インスタンスと同様に、`t` 関数などの翻訳 API や、`locale`、`fallbackLocale` などのプロパティを提供します。Composer インスタンスの詳細については、[API リファレンス](../../api/general/interfaces/Composer.md) を参照してください。
65+
`useI18n` は Composer インスタンスを返します。Composer インスタンスは、VueI18n インスタンスと同様に、`t` 関数などの翻訳 API や、`locale`、`fallbackLocale` などのプロパティを提供します。Composer インスタンスの詳細については、[API リファレンス](../../../api/general/interfaces/Composer.md) を参照してください。
6666

6767
上記の例では、`useI18n` にオプションがないため、グローバルスコープで動作する Composer インスタンスを返します。したがって、グローバルスコープで動作する Composer インスタンスを返すため、ここで展開された `t` 関数によって参照されるローカライズされたメッセージは、`createI18n` で指定されたものになります。
6868

@@ -135,7 +135,7 @@ const msg = computed(() => t('msg'))
135135
136136
```
137137

138-
`t` の詳細については、[API リファレンス](../../api/general/interfaces/Composer.md#t) を参照してください。
138+
`t` の詳細については、[API リファレンス](../../../api/general/interfaces/Composer.md#t) を参照してください。
139139

140140
## 複数化
141141

@@ -218,7 +218,7 @@ const now = ref(new Date())
218218
219219
```
220220

221-
`d` の詳細については、[API リファレンス](../../api/general/interfaces/Composer.md#d) を参照してください。
221+
`d` の詳細については、[API リファレンス](../../../api/general/interfaces/Composer.md#d) を参照してください。
222222

223223
## 数値フォーマット
224224

@@ -256,7 +256,7 @@ const money = ref(1000)
256256
</template>
257257
```
258258

259-
`n` の詳細については、[API リファレンス](../../api/general/interfaces/Composer.md#n) を参照してください。
259+
`n` の詳細については、[API リファレンス](../../../api/general/interfaces/Composer.md#n) を参照してください。
260260

261261
## グローバルスコープ
262262

‎docs/jp/guide/advanced/lazy.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,8 @@ export async function loadLocaleMessages(i18n, locale) {
7777
<!-- eslint-disable markdown/no-missing-label-refs -->
7878

7979
> [!TIP]
80-
> このコード例は、[i18n インスタンスの `global` プロパティ](../../api/general/interfaces/I18n.md#global) を使用してコンポーネントの外部で処理する方法も示しています。
81-
> i18n インスタンスについては、[API リファレンス](../../api/general/interfaces/I18n.md) を参照してください
80+
> このコード例は、[i18n インスタンスの `global` プロパティ](../../../api/general/interfaces/I18n.md#global) を使用してコンポーネントの外部で処理する方法も示しています。
81+
> i18n インスタンスについては、[API リファレンス](../../../api/general/interfaces/I18n.md) を参照してください
8282
8383
<!-- eslint-enable markdown/no-missing-label-refs -->
8484

‎docs/jp/guide/essentials/datetime.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ Vue I18n で日時値をローカライズするには、`$d` を使用します
4747
> VueI18n v9 では、オプション名は `dateTimeFormats` ではなく **`datetimeFormats`** であることに注意してください。詳細については、[マイグレーションガイド](../../guide/migration/breaking#rename-to-datetimeformats-from-datetimeformats) を参照してください。
4848
4949
> [!TIP]
50-
> `$d` には複数のオーバーロードがあります。詳細については [API リファレンス](../../api/vue/interfaces/ComponentCustomProperties.md#d) を参照してください。
50+
> `$d` には複数のオーバーロードがあります。詳細については [API リファレンス](../../../api/vue/interfaces/ComponentCustomProperties.md#d) を参照してください。
5151
5252
> [!NOTE]
5353
> ローカライズをサポートするいくつかの方法は次のとおりです：
@@ -155,7 +155,7 @@ DatetimeFormat コンポーネントにはいくつかの props があります
155155
<!-- eslint-disable markdown/no-missing-label-refs -->
156156

157157
> [!NOTE]
158-
> サポートされているスコープ付きスロットの完全なリストおよびその他の `i18n-d` プロパティは、[API リファレンス](../../api/general/type-aliases/DatetimeFormat.md) にあります。
158+
> サポートされているスコープ付きスロットの完全なリストおよびその他の `i18n-d` プロパティは、[API リファレンス](../../../api/general/type-aliases/DatetimeFormat.md) にあります。
159159
160160
<!-- eslint-enable markdown/no-missing-label-refs -->
161161

‎docs/jp/guide/essentials/number.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ Vue I18n で数値をローカライズするには、`$n` を使用します。
4848
<!-- eslint-disable markdown/no-missing-label-refs -->
4949

5050
> [!TIP]
51-
> `$n` にはいくつかのオーバーロードがあります。これらのオーバーロードについては、[API リファレンス](../../api/vue/interfaces/ComponentCustomProperties.md#n) を参照してください。
51+
> `$n` にはいくつかのオーバーロードがあります。これらのオーバーロードについては、[API リファレンス](../../../api/vue/interfaces/ComponentCustomProperties.md#n) を参照してください。
5252
5353
<!-- eslint-enable markdown/no-missing-label-refs -->
5454

@@ -165,7 +165,7 @@ NumberFormat コンポーネントにはいくつかの props があります。
165165
<!-- eslint-disable markdown/no-missing-label-refs -->
166166

167167
> [!NOTE]
168-
> サポートされているスコープ付きスロットの完全なリストおよびその他の `i18n-n` プロパティは、[API リファレンス](../../api/general/type-aliases/NumberFormat.md) にあります。
168+
> サポートされているスコープ付きスロットの完全なリストおよびその他の `i18n-n` プロパティは、[API リファレンス](../../../api/general/type-aliases/NumberFormat.md) にあります。
169169
170170
<!-- eslint-enable markdown/no-missing-label-refs -->
171171

‎docs/jp/guide/essentials/pluralization.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ Vue I18n は複数化をサポートするいくつかの方法を提供して
3030
<!-- eslint-disable markdown/no-missing-label-refs -->
3131

3232
> [!TIP]
33-
> `$t` にはいくつかのオーバーロードがあります。これらのオーバーロードについては、[API リファレンス](../../api/vue/interfaces/ComponentCustomProperties.md#t) を参照してください。
33+
> `$t` にはいくつかのオーバーロードがあります。これらのオーバーロードについては、[API リファレンス](../../../api/vue/interfaces/ComponentCustomProperties.md#t) を参照してください。
3434
3535
> [!NOTE]
3636
> 複数化をサポートするいくつかの方法は次のとおりです：

‎docs/jp/guide/essentials/syntax.md‎

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const messages = {
4444
> 翻訳関数のロケールメッセージリソースキーは、JavaScript オブジェクトのように `.` (ドット) を使用して特定のリソース名前空間を指定できます。
4545
4646
> [!TIP]
47-
> `$t` にはいくつかのオーバーロードがあります。これらのオーバーロードについては、[API リファレンス](../../api/vue/interfaces/ComponentCustomProperties.md#t) を参照してください。
47+
> `$t` にはいくつかのオーバーロードがあります。これらのオーバーロードについては、[API リファレンス](../../../api/vue/interfaces/ComponentCustomProperties.md#t) を参照してください。
4848
4949
<!-- eslint-enable markdown/no-missing-label-refs -->
5050

@@ -324,7 +324,55 @@ const messages = {
324324
- `$`
325325
- `|`
326326

327-
これらの文字を使用したい場合は、[リテラル補間](#リテラル補間) を使用する必要があります。
327+
これらの文字を使用したい場合は、[リテラル補間](#リテラル補間) または **エスケープシーケンス** を使用できます。
328+
329+
### エスケープシーケンス
330+
331+
:::tip NOTE
332+
エスケープシーケンスは v12 以降でサポートされます。
333+
:::
334+
335+
C言語のエスケープシーケンスと同様に、バックスラッシュ (`\`) を前置することで特殊文字をエスケープできます：
336+
337+
| エスケープ | 結果 | 説明 |
338+
|-----------|------|------|
339+
| `\{` | `{` | リテラルの開き波括弧 |
340+
| `\}` | `}` | リテラルの閉じ波括弧 |
341+
| `\@` | `@` | リテラルのアットマーク |
342+
| `\|` | `\|` | リテラルのパイプ |
343+
| `\\` | `\` | リテラルのバックスラッシュ |
344+
345+
例として、以下のロケールメッセージリソース：
346+
347+
```js
348+
const messages = {
349+
en: {
350+
address: '{account}\\@{domain}',
351+
braces: 'hello \\{world\\}',
352+
choices: 'option A \\| option B'
353+
}
354+
}
355+
```
356+
357+
以下は、テンプレートでの `$t` の使用例です：
358+
359+
```html
360+
<p>{{ $t('address', { account: 'foo', domain: 'domain.com' }) }}</p>
361+
<p>{{ $t('braces') }}</p>
362+
<p>{{ $t('choices') }}</p>
363+
```
364+
365+
結果は以下のようになります：
366+
367+
```html
368+
<p>foo@domain.com</p>
369+
<p>hello {world}</p>
370+
<p>option A | option B</p>
371+
```
372+
373+
:::tip NOTE
374+
特殊文字以外の文字の前にあるバックスラッシュは、リテラルのバックスラッシュとして扱われます。例えば、メッセージ内の `\n` は改行ではなく `\n`（バックスラッシュ + n）のまま残ります。
375+
:::
328376

329377
## Rails i18n フォーマット
330378

‎docs/zh/guide/advanced/composition.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const { t } = useI18n() // [!code ++]
6262

6363
你必须在 `<script setup>` 的顶部调用 `useI18n`。
6464

65-
`useI18n` 返回一个 Composer 实例。Composer 实例提供翻译 API（如 `t` 函数）以及 `locale` 和 `fallbackLocale` 等属性，就像 VueI18n 实例一样。有关 Composer 实例的更多信息，请参阅 [API 参考](../../api/general/interfaces/Composer.md)。
65+
`useI18n` 返回一个 Composer 实例。Composer 实例提供翻译 API（如 `t` 函数）以及 `locale` 和 `fallbackLocale` 等属性，就像 VueI18n 实例一样。有关 Composer 实例的更多信息，请参阅 [API 参考](../../../api/general/interfaces/Composer.md)。
6666

6767
在上面的例子中，`useI18n` 没有选项，所以它返回一个与全局作用域一起工作的 Composer 实例。因此，它返回一个与全局作用域一起工作的 Composer 实例，这意味着这里传播的 `t` 函数引用的本地化消息是在 `createI18n` 中指定的消息。
6868

@@ -135,7 +135,7 @@ const msg = computed(() => t('msg'))
135135
136136
```
137137

138-
有关 `t` 的更多详细信息，请参阅 [API 参考](../../api/general/interfaces/Composer.md#t)
138+
有关 `t` 的更多详细信息，请参阅 [API 参考](../../../api/general/interfaces/Composer.md#t)
139139

140140
## 复数形式
141141

@@ -218,7 +218,7 @@ const now = ref(new Date())
218218
219219
```
220220

221-
有关 `d` 的更多详细信息，请参阅 [API 参考](../../api/general/interfaces/Composer.md#d)
221+
有关 `d` 的更多详细信息，请参阅 [API 参考](../../../api/general/interfaces/Composer.md#d)
222222

223223
## 数字格式化
224224

@@ -256,7 +256,7 @@ const money = ref(1000)
256256
</template>
257257
```
258258

259-
有关 `n` 的更多详细信息，请参阅 [API 参考](../../api/general/interfaces/Composer.md#n)
259+
有关 `n` 的更多详细信息，请参阅 [API 参考](../../../api/general/interfaces/Composer.md#n)
260260

261261
## 全局作用域
262262

‎docs/zh/guide/advanced/lazy.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,8 @@ export async function loadLocaleMessages(i18n, locale) {
7777
<!-- eslint-disable markdown/no-missing-label-refs -->
7878

7979
> [!TIP]
80-
> 此代码示例还展示了如何使用 [i18n 实例的 `global` 属性](../../api/general/interfaces/I18n.md#global) 在组件外部处理它。
81-
> 关于 i18n 实例，请参阅 [API 参考](../../api/general/interfaces/I18n.md)
80+
> 此代码示例还展示了如何使用 [i18n 实例的 `global` 属性](../../../api/general/interfaces/I18n.md#global) 在组件外部处理它。
81+
> 关于 i18n 实例，请参阅 [API 参考](../../../api/general/interfaces/I18n.md)
8282
8383
<!-- eslint-enable markdown/no-missing-label-refs -->
8484

‎docs/zh/guide/essentials/datetime.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const i18n = createI18n({
4747
> 请注意，在 VueI18n v9 中，选项名称是 **`datetimeFormats`**，而不是 `dateTimeFormats`。要了解更多详细信息，请访问 [迁移指南](../../guide/migration/breaking#rename-to-datetimeformats-from-datetimeformats)。
4848
4949
> [!TIP]
50-
> `$d` 有多个重载。你可以在 [API 参考](../../api/vue/interfaces/ComponentCustomProperties.md#d) 中找到更多信息。
50+
> `$d` 有多个重载。你可以在 [API 参考](../../../api/vue/interfaces/ComponentCustomProperties.md#d) 中找到更多信息。
5151
5252
> [!NOTE]
5353
> 支持本地化的一些方法包括：
@@ -155,7 +155,7 @@ DatetimeFormat 组件有一些属性。
155155
<!-- eslint-disable markdown/no-missing-label-refs -->
156156

157157
> [!NOTE]
158-
> 支持的作用域插槽的完整列表以及其他 `i18n-d` 属性可以在 [API 参考](../../api/general/type-aliases/DatetimeFormat.md) 中找到。
158+
> 支持的作用域插槽的完整列表以及其他 `i18n-d` 属性可以在 [API 参考](../../../api/general/type-aliases/DatetimeFormat.md) 中找到。
159159
160160
<!-- eslint-enable markdown/no-missing-label-refs -->
161161

0 commit comments

Comments
 (0)