Здравствуйте, в этой статье мы собираемся изменить язык приложения с помощью Javascript.
Начинать
Сначала нам нужны языковые файлы. Я сопоставляю имя файла с кодом языка и расширением json. Нравится.
Все в языковом файле должно быть одно и то же. Ключевое значение. Со значением ключа мы обнаружим элементы html, которые хотим перевести.
de.json
{
«привет»: «Здравствуйте»,
«локализация»: «Локализация» ,
«with»: «С Javascript»
}
en.json
{
"привет": "привет",
«локализация»: «Локализация»,
«с»: «с javascript»
}
tr.json
{
«привет»: «Мерхаба»,
«локализация»: «Yerelleştirme»,
«with»: «файл JavaScript»
}
fr.json
{
«привет»: «Добрый день»,
«локализация»: «Локализация»,
«with»: «Avec javascript»
}
ja.json
{
«привет»: «こんにちは»,
«локализация»: «ローカリゼーション»,
«с»: «Javascriptで»
}
Теперь мы можем создать HTML-элементы.
Как видите, все элементы, которые мы хотим локализовать, имеют атрибут data-text и атрибут data-text, равные значениям ключа.
В файле javascript я создал функцию под названием language. Эта функция принимает один аргумент (код языка). И с этим аргументом мы получаем доступ к файлу json.
Object.keys
Для ключей доступа к значению мы можем использовать Object.keys, и у нас будет такой вывод.
Object.keys(язык)
Как видите, Object.keys возвращает массив, поэтому мы можем использовать forEach.
Объект.ключи(язык).forEach(элемент =› {
console.журнал(элемент);
})
Также, если вы хотите получить доступ к значению, мы можем использовать:
console.log(язык[элемент])
Теперь мы обнаружим, что элементы html соответствуют значению ключа.
Объект.ключи(язык).forEach(ключ =› {
const element = document.querySelector(`[data-text="${key}"]`)
элемент.textContent = язык[ключ]
})
Мы нашли элементы html с текстом данных и ключом, теперь мы можем изменить textContent или innerHTML
