Конечно, вот перевод текста на русский язык:
Всегда копируете и вставляете дублирующийся код i18n, такой как t('home:submit')
или t('common:something:success')
? Это замедляет работу, и легко допустить опечатку, если не перепроверять слова внимательно.
Мне такой подход не нравится, я предпочитаю писать код в виде цепочки, например, i18n.common.something.success
, с проверкой на TypeScript. Так почему бы не попробовать этот пакет?
IE | Edge | Chrome | Firefox | Safari | Node |
---|---|---|---|---|---|
9+ | 12+ | 5+ | 4+ | 5+ | * |
// ./src/i18n/locales/en.ts
const en = {
button: {
submit: 'Submit',
cancel: 'Go back',
},
user: {
profile: 'Tom',
}
};
export default en;
export type Locale = typeof en;
// ./src/i18n/locales/zh.ts
import { Locale } from './en';
const zh: Locale = {
button: {
submit: '提交',
cancel: '返回',
},
user: {
profile: '原罪',
}
};
export default zh;
// ./src/i18n/index.ts
import { createI18n } from '@i18n-chain/*';
import en from './locales/en';
const i18n = createI18n({
defaultLocale: {
key: 'en',
values: en,
}
});
export default i18n;
Первый способ — определить сразу.
import { createI18n } from '@i18n-chain/*';
import zh from './locales/zh';
const i18n = createI18n({
defaultLocale: { ... },
});
i18n._.define('zh', zh);
export default i18n;
Второй способ — асинхронный импорт. загрузчик будет вызываться, когда локали не определены.
const i18n = createI18n({
defaultLanguage: { ... },
loader: (name) => import('./locales/' + name),
});
export default i18n;
i18n._.locale('zh');
Не стесняйтесь попробовать i18n._.t('button.submit')
и i18n.button.submit
, они имеют тот же эффект. К сожалению, вы не можете наслаждаться проверкой типов, используя chain._.t('xx.yy.zz')
.
Вы должны использовать массив для определения шаблона, когда параметры существуют.
const en = {
property: ['{{property1}}template{{property2}}', { property1: value2, property2: value2 }],
};
Второй элемент в массиве — это объект, который является значением по умолчанию для шаблона.
const en = {
user: {
profile: [
'My name is {{name}}, I born in {{country}}, I am {{age}} old now, my birthday is {{birthday}}',
{
country: undefined,
name: 'Tom',
age: (value: number = 20) => {
if (value <= 1) {
return `${value} year`;
} else {
return `${value} years`;
}
},
birthday: (value: Date) => {
return value.toString();
}
}
]
}
};
////////////////////////////////////
// Приведённый выше код эквивалентен определению ниже (автоматически): (автоматически)
interface User {
Profile {
country: string | number;
name?: string;
age?: number;
birthday: Date;
}
}
/////////////////////////////////////
// Минимальная конфигурация
i18n.user.profile({
age: 20,
country: 'China',
});
// Добавление необязательного свойства `name`
i18n.user.profile({
age: 30,
country: 'Usa',
name: 'Lucy',
});
Основное различие между методом age
и birthday
заключается в том, что age
имеет значение параметра по умолчанию (value: number = 20) => {...}
, а birthday
— нет. Необязательно вводить значение для свойства, у которого есть значение параметра функции по умолчанию.
Установите undefined
для свойства, если вы хотите принудительно ввести значение при вызове метода.
const en = {
template: ['Hello, {{world}}', { world: undefined }]
};
Платформы | I18n |
---|---|
React & React-Native | @i18n-chain/react |
Vue | Скоро... |
Angular | Скоро... |
Taro | @i18n-chain/taro |
NodeJs & Vanilla-Js | @i18n-chain/core |
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )