返回

gt-next@6.3.0

Ernest McCarter avatarErnest McCarter
gt-next6.3.0AI 开发字符串翻译

概述

在 gt-next 6.3.0 中，我们进一步朝着一个同时适合人类开发者和 AI 开发者使用的库迈进。此次发布的指导原则是：在引入 i18n 所需关键功能的同时，尽可能减少对现有代码的影响。

为此，我们引入了新的 msg() 函数，让你可以在代码库的任何位置处理待翻译字符串。此前，开发者必须沿调用栈逐层传递来自 useGT() 或 getGT() 的 gt() 函数，才能翻译字符串。有了 msg()，你只需将字符串用它包装一次，然后在渲染时再通过 m() 处理即可。

对比

过去，必须跨多层传递 gt() 函数，才能包装字符串：

export const greeting1 = 'Hello, world!'
export const getGreeting2 = (gt: any) => gt('Hello, world!')
import { greeting1, getGreeting2 } from './constants'

export default function Page() {
  const gt = useGT()
  return (
    <div>
      {greeting1}
      {getGreeting2(gt)}
    </div>
  )
}

现在，借助 msg()，字符串可以直接声明为常量。唯一的要求是，在显示时将它们传给 m() (来自 useMessages() 或 getMessages()) 。

export const greeting1 = 'Hello, world!'
export const greeting2 = msg('Hello, world!')
import { greeting1, greeting2 } from './constants'

export default function Page() {
  const m = useMessages()
  return (
    <div>
      {greeting1}
      {m(greeting2)}
    </div>
  )
}

编码与解码

为支持插值，msg() 函数返回的是已编码的消息，而不是普通字符串。其格式如下：

<interpolated content>:<base64 encoded string>

base64 编码后的部分包含一个 JSON 对象，其中包括：

  • $_hash：原始字符串的哈希值
  • $_source：插值到消息中的参数
  • $id：自定义唯一标识符 (如果提供)
  • $context：消息的上下文 (如果指定)
  • 插值中包含的任意变量

这种设计会略微改变字符串直接比较时的行为，但能确保对类型和代码结构的影响降到最低。要访问插值后的内容，请使用 decodeMsg()。

为什么要使用编码字符串？

替代方案是让 msg() 返回一种包含额外元数据的自定义对象类型。虽然这在编码/解码范式下可行，但在处理严格类型时会带来问题。

我们最终认为，在这种场景下，尽可能降低 i18n 影响的最佳方式，就是改为返回一个包含元数据的字符串。

示例

未使用 i18n 的原始代码：

const name = 'John'
const message = `Hello, ${name}!`

if (message.length > 10) {
  console.log('The message is too long')
} else {
  console.log('The message is just the right length')
}

使用 msg() 和 decodeMsg()：

import { msg, decodeMsg } from 'gt-next'

const name = 'John'
const message = msg('Hello, {name}!', { name })

if (decodeMsg(message).length > 10) {
  console.log('The message is too long')
} else {
  console.log('The message is just the right length')
}

其他

你也可以在 gt() 函数中覆盖参数，即使这些参数在调用 msg() 时已经完成插值。

import { msg, useMessages } from 'gt-next'

const message = msg('Hello, {name}!', { name: 'John' })

export default function Page() {
  const m = useMessages()
  return <div>{m(message, { name: 'Jane' })}</div> // 这将返回 "Hello, Jane!"
}

总结

此版本重点提升了 gt-next 的开发者友好性，同时尽可能降低 i18n 的额外开销。新的 msg() 函数无需再沿调用栈传递 gt() 函数，从而提供了更简洁、更直观的字符串翻译方式，并显著简化了 i18n 流程。