JavaScript Internationaal Lokaliseren en Taalondersteuning
description
Met deze prompt kun je je JavaScript-applicatie geschikt maken voor een internationaal publiek door meertaligheid en juiste lokalisatie toe te passen. Dit voorkomt fouten bij datum-, tijd- en getalweergave en verhoogt de gebruikerservaring voor diverse talen en regio's.
prompt
Help me mijn JavaScript-applicatie te voorzien van internationale lokalisatie en taalondersteuning. Leg uit hoe ik meertalige content kan beheren, datu ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier zijn stappen om je JavaScript-applicatie meertalig te maken en te lokaliseren:
1. Meertalige Content Beheren:
- Gebruik een i18n-bibliotheek zoals [i18next](https://www.i18next.com/) of [FormatJS](https://formatjs.io/).
- Maak vertalingsbestanden voor elke taal, bijvoorbeeld:
```json
// nl.json
{
"welcome": "Welkom",
"date": "Datum",
"amount": "Bedrag"
}
// en.json
{
"welcome": "Welcome",
"date": "Date",
"amount": "Amount"
}
// es.json
{
"welcome": "Bienvenido",
"date": "Fecha",
"amount": "Cantidad"
}
```
- Laad deze vertalingen en stel de taal in afhankelijk van de gebruikersvoorkeur of browserinstellingen.
2. Datum- en Tijdformaten Aanpassen:
- Gebruik de [Intl.DateTimeFormat](https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)-klasse.
- Voorbeeld:
```js
const date = new Date();
const formatter = new Intl.DateTimeFormat('nl-NL', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
console.log(formatter.format(date));
```
- Vervang `'nl-NL'` door `'en-US'` of `'es-ES'` afhankelijk van de taal.
3. Numerieke Weergave Lokaliseren:
- Gebruik eveneens `Intl.NumberFormat`.
- Voorbeeld:
```js
const amount = 12345.67;
const formatter = new Intl.NumberFormat('nl-NL', {
style: 'currency',
currency: 'EUR'
});
console.log(formatter.format(amount));
```
- Pas de taal- en valutacode aan op basis van de taal.
4. Taal Wisselen:
- Stel een mechanisme in om de taal te wijzigen, bijvoorbeeld via een dropdown menu.
- Bij verandering laad je de juiste vertalingen en pas je de formaten toe.
5. Integratie in je UI:
- Gebruik de vertaalstrings uit je vertalingsbestanden om je interface te vullen.
- Gebruik JavaScript om dynamisch inhoud te vertalen op basis van de geselecteerde taal.
Voorbeeld van eenvoudige taalkeuze:
```js
let currentLanguage = 'en';
function setLanguage(lang) {
currentLanguage = lang;
// Laad vertalingen en update UI
updateUI();
}
function updateUI() {
// Voorbeeld: vertaal tekst
document.querySelector('#welcome').textContent = translations[currentLanguage]['welcome'];
// Formatteer datum
const dateFormatter = new Intl.DateTimeFormat(currentLanguage, { year: 'numeric', month: 'long', day: 'numeric' });
document.querySelector('#date').textContent = dateFormatter.format(new Date());
// Formatteer bedrag
const numberFormatter = new Intl.NumberFormat(currentLanguage, { style: 'currency', currency: getCurrencyCode(currentLanguage) });
document.querySelector('#amount').textContent = numberFormatter.format(1234.56);
}
// Helper om valutacode te bepalen
function getCurrencyCode(lang) {
switch (lang) {
case 'nl': return 'EUR';
case 'en': return 'USD';
case 'es': return 'EUR';
default: return 'EUR';
}
}
```
Kort samengevat:
- Beheer vertalingen via JSON-bestanden of een i18n-bibliotheek.
- Gebruik `Intl.DateTimeFormat` voor datums en `Intl.NumberFormat` voor cijfers.
- Implementeer een taalkeuzemenu.
- Dynamisch aanpassen van content en formaten op basis van taal.
Wil je een concrete codevoorbeeld of hulp bij het integreren in jouw bestaande app?
provider: deepseek
model: deepseek-chat
Zeker! Ik help je graag met het implementeren van internationale lokalisatie (i18n) in je JavaScript-applicatie. Hier is een complete uitleg:
## 1. Meertalige Content Beheren
### Gebruik een i18n-bibliotheek (aanbevolen):
```javascript
// Installatie: npm install i18next react-i18next (voor React) of i18next voor vanilla JS
// i18n configuratie
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
// Vertaalbronnen
const resources = {
en: {
translation: {
welcome: "Welcome",
button: "Click me",
greeting: "Hello, {{name}}!"
}
},
es: {
translation: {
welcome: "Bienvenido",
button: "Haz clic",
greeting: "¡Hola, {{name}}!"
}
},
nl: {
translation: {
welcome: "Welkom",
button: "Klik mij",
greeting: "Hallo, {{name}}!"
}
}
};
i18n
.use(initReactI18next)
.init({
resources,
lng: "nl", // standaardtaal
interpolation: {
escapeValue: false
}
});
```
### Zelfgemaakte oplossing (eenvoudig):
```javascript
const translations = {
en: {
title: "Welcome to my app",
subtitle: "Enjoy your stay"
},
es: {
title: "Bienvenido a mi aplicación",
subtitle: "Disfruta tu estancia"
},
nl: {
title: "Welkom bij mijn app",
subtitle: "Geniet van je verblijf"
}
};
function setLanguage(lang) {
document.querySelector('[data-i18n="title"]').textContent = translations[lang].title;
document.querySelector('[data-i18n="subtitle"]').textContent = translations[lang].subtitle;
}
```
## 2. Datum- en Tijdformaten Aanpassen
### Gebruik Intl.DateTimeFormat:
```javascript
function formatDate(date, locale = 'nl-NL') {
return new Intl.DateTimeFormat(locale, {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long'
}).format(date);
}
// Gebruik:
const date = new Date();
console.log(formatDate(date, 'en-US')); // "Monday, January 15, 2024"
console.log(formatDate(date, 'es-ES')); // "lunes, 15 de enero de 2024"
console.log(formatDate(date, 'nl-NL')); // "maandag 15 januari 2024"
```
### Tijd formatteren:
```javascript
function formatTime(date, locale = 'nl-NL') {
return new Intl.DateTimeFormat(locale, {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
}).format(date);
}
```
## 3. Numerieke Weergave Lokaliseren
### Getallen en valuta:
```javascript
function formatNumber(number, locale = 'nl-NL') {
return new Intl.NumberFormat(locale).format(number);
}
function formatCurrency(amount, currency = 'EUR', locale = 'nl-NL') {
return new Intl.NumberFormat(locale, {
style: 'currency',
currency: currency
}).format(amount);
}
// Gebruik:
console.log(formatNumber(1234567.89, 'en-US')); // "1,234,567.89"
console.log(formatNumber(1234567.89, 'es-ES')); // "1.234.567,89"
console.log(formatNumber(1234567.89, 'nl-NL')); // "1.234.567,89"
console.log(formatCurrency(99.99, 'EUR', 'en-US')); // "€99.99"
console.log(formatCurrency(99.99, 'EUR', 'es-ES')); // "99,99 €"
console.log(formatCurrency(99.99, 'EUR', 'nl-NL')); // "€ 99,99"
```
## 4. Complete Implementatie Voorbeeld
```javascript
class LocalizationManager {
constructor() {
this.currentLang = 'nl';
this.translations = {
en: {
welcome: "Welcome",
date: "Date",
price: "Price",
changeLanguage: "Change language"
},
es: {
welcome: "Bienvenido",
date: "Fecha",
price: "Precio",
changeLanguage: "Cambiar idioma"
},
nl: {
welcome: "Welkom",
date: "Datum",
price: "Prijs",
changeLanguage: "Taal wijzigen"
}
};
}
setLanguage(lang) {
this.currentLang = lang;
this.updateUI();
}
t(key) {
return this.translations[this.currentLang][key] || key;
}
formatDate(date) {
return new Intl.DateTimeFormat(this.getLocale(), {
year: 'numeric',
month: 'long',
day: 'numeric'
}).format(date);
}
formatCurrency(amount, currency = 'EUR') {
return new Intl.NumberFormat(this.getLocale(), {
style: 'currency',
currency: currency
}).format(amount);
}
getLocale() {
const localeMap = {
'en': 'en-US',
'es': 'es-ES',
'nl': 'nl-NL'
};
return localeMap[this.currentLang];
}
updateUI() {
// Update alle elementen met data-i18n attribuut
document.querySelectorAll('[data-i18n]').forEach(element => {
const key = element.getAttribute('data-i18n');
element.textContent = this.t(key);
});
}
}
// Gebruik:
const i18n = new LocalizationManager();
// Taalwisselaar
document.getElementById('language-selector').addEventListener('change', (e) => {
i18n.setLanguage(e.target.value);
});
```
## 5. HTML Structuur Voorbeeld
```html
<div>
<h1 data-i18n="welcome"></h1>
<p data-i18n="date"></p>: <span id="current-date"></span>
<p data-i18n="price"></p>: <span id="product-price"></span>
<select id="language-selector">
<option value="nl">Nederlands</option>
<option value="en">English</option>
<option value="es">Español</option>
</select>
</div>
```
## 6. Extra Tips
- **Sla taalvoorkeur op** in localStorage:
```javascript
// Bij opstarten
const savedLang = localStorage.getItem('preferredLanguage');
if (savedLang) i18n.setLanguage(savedLang);
// Bij taalwijziging
localStorage.setItem('preferredLanguage', newLang);
```
- **Gebruik placeholders** voor dynamische content:
```javascript
// In je vertalingen
{
"greeting": "Hallo, {{name}}! Vandaag is het {{date}}"
}
// Gebruik
i18n.t('greeting', { name: 'Jan', date: formattedDate });
```
Deze aanpak zorgt voor een schaalbare en onderhoudbare lokalisatie-oplossing voor je applicatie!