Что такое интернационализация?
Интернационализация труднопроизносима, поэтому иногда мы произносим ее так ( i18n ).
Интернационализация — это, по сути, разработка приложения с целью легкой локализации для пользователей, принадлежащих к различным регионам с разными культурами.
С ростом глобализации мы не можем сказать, что пользователь будет только из определенного региона.
Сейчас пользовательская база почти из каждой страны мира.
Instagram, Twitter, Facebook, Google — как ни назови.
Все эти крупные гиганты внедрили культуру i18n в свои приложения.
Давайте рассмотрим пример, чтобы понять его важность.
По работе вам срочно нужно посетить Россию.
И для этого вам нужно подать заявление на получение рабочей визы на российском сайте.
Будучи испанцем, вы не сможете понять русский язык, поэтому российский официальный сайт интернационализирует сайт специально для таких пользователей, как вы.
Все содержимое сайта может быть локализовано на испанский язык, и вам будет легко понять, как оформить ваш запрос на получение визы.
Кнопка перевода с русского на испанский («Отправить»)
Итак, что такое локализация?
Также известна под названием (L10N).
Локализация — это адаптация содержимого приложения в соответствии с регионом, в котором оно используется.
Перевод не является полным решением
Потому что иногда нам нужен стабильный парсер для форматирования числа и валюты для конкретного региона.
Также необходимо определить направление линии.
Таким образом, есть много факторов, почему перевод не всегда является лучшим решением
Включение интернационализации в React с помощью react-intl by formatjs
С помощью React-intl мы можем легко добавить интернационализацию (i18n) в наше приложение React
установите react -intl в ваше приложение react
npm install react-intl
Это весь код нашего небольшого приложения, мы будем разбивать концепции по одной.
Наш интернализированный (i18n) APP
import { useState } from "react";
import { IntlProvider, FormattedMessage, FormattedNumber } from "react-intl";
const messagesInFrench = {
myMessage: "Aujourd'hui, c'est le {ts, date, ::yyyyMMdd}",
};
const messageInHindi = {
myMessage: "आज की तारीख {ts, date, ::yyyyMMdd}",
};
const messageInEnglish = {
myMessage: "Today is {ts ,date , ::yyyyMMdd}",
};
function App() {
const [currentLocale, setLocale] = useState("en");
const getMessageForLocale = (localeType) => {
switch (localeType) {
case "en":
return messageInEnglish;
case "fr":
return messagesInFrench;
case "hi":
return messageInHindi;
}
};
return (
<IntlProvider
messages={getMessageForLocale(currentLocale)}
locale={currentLocale}
defaultLocale="en"
>
<p>
<FormattedMessage id="myMessage" values={{ ts: Date.now() }} />
<br />
</p>
<button onClick={() => setLocale("fr")}>French</button> <br/>
<button onClick={() => setLocale("hi")}>Hindi</button>
</IntlProvider>
);
}
export default App;
Наше приложение локализовано в трех различных локалях — французской, хинди и английской.
Разбивка App.js
import { IntlProvider, FormattedMessage } from "react-intl";
IntlProvider
Этот компонент фактически предоставляет контекст (i18n) данных (например, сообщения для различных регионов) дочерним компонентам.
Он настраивает текущую локаль и сообщение перевода в корне нашего приложения, чтобы к ним можно было получить доступ в любом месте нашего приложения.
Что такое локаль?
Локаль — это комбинация языка + региона.
Вот сообщения перевода:
const messagesInFrench = {
myMessage: "Aujourd'hui, c'est le {ts, date, ::yyyyMMdd}",
};
const messageInHindi = {
myMessage: "आज की तारीख {ts, date, ::yyyyMMdd}",
};
const messageInEnglish = {
myMessage: "Today is {ts ,date , ::yyyyMMdd}",
};
<IntlProvider
messages={getMessageForLocale(currentLocale)}
locale={currentLocale}
defaultLocale="en"
>
message : getMessageForLocale( ) получает сообщение для текущей локали
locale: currentLocale имеет значение текущей локали нашего приложения
defaultLocale: ‘en’ Английский
Когда мы нажимаем на эти кнопки, текущая локаль меняется соответственно
<button onClick={() => setLocale("fr")}>French</button> <br/>
<button onClick={() => setLocale("hi")}>Hindi</button>
При нажатии на кнопку ‘french’ текущая локаль будет установлена на «fr»
если нажать кнопку ‘hindi’, то текущая локаль будет установлена на «hi».
Таким образом, сообщения также будут изменены в соответствии с регионом.
const [currentLocale, setLocale] = useState("en");
const getMessageForLocale = (localeType) => {
switch (localeType) {
case "en":
return messageInEnglish;
case "fr":
return messagesInFrench;
case "hi":
return messageInHindi;
}
};
FormatMessage
Этот компонент форматирует сообщение со значением id строки в зависимости от локали.
В нашем примере
const messageInHindi = {
myMessage: "आज की तारीख {ts, date, ::yyyyMMdd}",
};
const messageInEnglish = {
myMessage: "Today is {ts ,date , ::yyyyMMdd}",
};
// id is MyMessage
// we use format message this way
<FormattedMessage id="myMessage" values={{ ts: Date.now() }} />
FormatMessge отобразит сообщение с определенным id.
Он также позволяет встраивать значения данных в соответствии с форматом текущей локали.
Для локали ‘en’
Today is {ts ,date , ::yyyyMMdd} // english format
// ts value will be of Date.now()
// which will render
// Today is 08/07/2022
// 08/07/2022 mm/dd/yy the english format
Для локали ‘hi’
आज की तारीख {ts, date, ::yyyyMMdd} // hindi format
// ts value will be of Date.now()
// which will render
// आज की तारीख 07/08/2022
// 07/08/2022 dd/mm/yy the hindi localized format
Вы можете наблюдать, как меняется формат даты в зависимости от региона.
Это то, что в основном называется локализацией (L10N).
Форматирование содержимого нашего сайта в зависимости от местоположения и региона пользователя.
Есть также некоторые другие компоненты для форматирования различных типов данных, таких как числа, относительное время.
Вы можете обратиться к документации API.
https://formatjs.io/docs/react-intl/api/#formattime
Итак, это был просто базовый пример того, как мы можем позволить нашему react-приложению работать в различных регионах.
Я надеюсь, что это может помочь вам!
Спасибо за прочтение 🌻.
До свидания 👋