Javascript 如何使用插值法格式将数字翻译成其他语言

Javascript 如何使用插值法格式将数字翻译成其他语言,javascript,reactjs,localization,i18next,react-i18next,Javascript,Reactjs,Localization,I18next,React I18next,我对使用react i18next是新手,我尝试将文本、日期和数字翻译成其他语言,我可以通过下拉菜单将其转换成其他语言。插值数字格式在这里无法按预期工作 以下是我的代码片段: App.tsx function HeaderComponent() { const [t] = useTranslation('common'); const [val, setVal] = useState('en'); window.moment = moment; return <div>

我对使用react i18next是新手,我尝试将文本、日期和数字翻译成其他语言,我可以通过下拉菜单将其转换成其他语言。插值数字格式在这里无法按预期工作

以下是我的代码片段:

App.tsx

function HeaderComponent() {
  const [t] = useTranslation('common');
  const [val, setVal] = useState('en');
  window.moment = moment;
  return <div>
    <select
      value={val}
      onChange={(e) => {
        const vl = e.currentTarget.value;
        setVal(vl);
        changeLanguage(vl);
      }}
    >
      <option value="en">en</option>
      <option value="hi">in</option>
      <option value="bn">bn</option>
      <option value="mr">mr</option>
      <option value="es">es</option>
      <option value="de">de</option>
    </select>
    <h1>{t('welcome.title', { framework: 'React' })}</h1>
    <p>
      {t('date_format_two', { date: new Date() })}
    </p>
    <p>
      {t('number_one', { number: 10 })}
    </p>
  </div>
}
    
function App() {
  return (
    <Suspense fallback="loading">
      <div className="App">
        <HeaderComponent />
      </div>
    </Suspense>
  );
}

export default App;
utils/i18n.js

i18next
    .use(LanguageDetector)
    .use(initReactI18next)
    .use(ChainedBackend)
    .init({
        ns: ["common"],
        defaultNS: "common",
        fallbackLng: "en",
        debug: true,
        load: "languageOnly",
        returnObjects: true,
        joinArrays: true,
        cleanCode: true,
        interpolation: {
            format: (value, format, lng) => {
                // not getting the value for numbers here
                if (value instanceof Date) {
                    return moment().format(format);
                }
                if (typeof value === "number") {
                    return value.toLocaleString(lng);
                } 
                return value;
            },
            escapeValue: false
        },
        lng: 'en',                              // language to use
        react: {
            wait: true,
            useSuspense: false
        },
        backend: {
            backends: backends,
            backendOptions: backEndOptions
        }
    });
export const backends = [XHRBackEnd];

export const loadPath = () => "/locales/{{lng}}/{{ns}}.json";

export const backEndOptions = [{ loadPath }];
locales/en/common.json

{
"welcome": {
        "title": "Welcome to {{framework}}!"
    },
    "date_format_one": "{{-date, YYYY/MM/DD}}",
    "date_format_two": "{{date, LL}}",
     "number_one": "Number is: {{ number }}"
}
{
"welcome": {
        "title": "Bienvenido a {{framework}}!"
    },
    "date_format_one": "{{-date, YYYY/MM/DD}}",
    "date_format_two": "{{date, DD-MM-YYYY}}",
     "number_one": "Number is: {{ number }}"
}
{
"welcome": {
        "title": "Bienvenido a {{framework}}!"
    },
    "date_format_one": "{{-date, YYYY/MM/DD}}",
    "date_format_two": "{{date, DD-MM-YYYY}}",
     "number_one": "Number4 is: {{ number, format }}"
}
locales/es/common.json

{
"welcome": {
        "title": "Welcome to {{framework}}!"
    },
    "date_format_one": "{{-date, YYYY/MM/DD}}",
    "date_format_two": "{{date, LL}}",
     "number_one": "Number is: {{ number }}"
}
{
"welcome": {
        "title": "Bienvenido a {{framework}}!"
    },
    "date_format_one": "{{-date, YYYY/MM/DD}}",
    "date_format_two": "{{date, DD-MM-YYYY}}",
     "number_one": "Number is: {{ number }}"
}
{
"welcome": {
        "title": "Bienvenido a {{framework}}!"
    },
    "date_format_one": "{{-date, YYYY/MM/DD}}",
    "date_format_two": "{{date, DD-MM-YYYY}}",
     "number_one": "Number4 is: {{ number, format }}"
}
如何在react-i18next中使用插值实现数字转换?任何与此相关的帮助都将不胜感激。

我找到了解决方案

需要使用逗号(,)和json文件中的格式,如下所示,并且一切正常-

locales/es/common.json

{
"welcome": {
        "title": "Welcome to {{framework}}!"
    },
    "date_format_one": "{{-date, YYYY/MM/DD}}",
    "date_format_two": "{{date, LL}}",
     "number_one": "Number is: {{ number }}"
}
{
"welcome": {
        "title": "Bienvenido a {{framework}}!"
    },
    "date_format_one": "{{-date, YYYY/MM/DD}}",
    "date_format_two": "{{date, DD-MM-YYYY}}",
     "number_one": "Number is: {{ number }}"
}
{
"welcome": {
        "title": "Bienvenido a {{framework}}!"
    },
    "date_format_one": "{{-date, YYYY/MM/DD}}",
    "date_format_two": "{{date, DD-MM-YYYY}}",
     "number_one": "Number4 is: {{ number, format }}"
}
如果像我这样的人将来在react-i18next中是新手,那么发布此答案是否会对我有所帮助