Javascript 如何使用插值法格式将数字翻译成其他语言
我对使用react i18next是新手,我尝试将文本、日期和数字翻译成其他语言,我可以通过下拉菜单将其转换成其他语言。插值数字格式在这里无法按预期工作 以下是我的代码片段: App.tsxJavascript 如何使用插值法格式将数字翻译成其他语言,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>
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中是新手,那么发布此答案是否会对我有所帮助