Zum Inhalt springen
JavaScript i18n

JavaScript-i18n: Browsernative Internationalisierung mit der Intl-API

JavaScript enthält die Intl-API als integrierten Standard für die Formatierung von Zahlen, Datumsangaben und Listen sowie für die Handhabung von Pluralisierungsregeln in verschiedenen Sprachumgebungen. Es sind keine externen Bibliotheken erforderlich. Die API wird von allen modernen Browsern und Node.js unterstützt und bietet von Haus aus sprachumgebungsabhängigen Zeichenfolgenvergleich, Segmentierung und relative Zeitformatierung.

Setup

Add i18n to plain JavaScript in three steps

There is no JavaScript-specific package to install: @better-i18n/core is the plain-JavaScript client every other SDK here wraps.

Install the client

One dependency-free package. It runs in browsers, Node, Deno, Bun and Cloudflare Workers.

terminalbash
npm install @better-i18n/core

# Zero dependencies. Runs in browsers, Node, Deno,
# Bun and Cloudflare Workers.

Create the client once

Instantiate at module scope so the 60-second in-memory cache is shared instead of rebuilt on every call.

i18n.jsjs
import { createI18nCore } from '@better-i18n/core'

export const i18n = createI18nCore({
  projectId: 'your-org/your-project', // Settings → General → Project ID
  defaultLocale: 'en',
})

Read a message

getMessages returns a plain nested object, so a four-line lookup helper is the whole runtime you need.

main.jsjs
import { i18n } from './i18n.js'

const messages = await i18n.getMessages('en')

// getMessages resolves to { namespace: { key: value } }
const t = (path) =>
  path.split('.').reduce((node, part) => node?.[part], messages) ?? path

document.querySelector('h1').textContent = t('home.title')

// Locales come from the project manifest, not a hardcoded array
const languages = await i18n.getLanguages()

How it works

Where a JavaScript string comes from

No build step and no bundled locale files: the client resolves a locale at runtime and the edge answers it.

Read path — every locale load

Your JavaScript app

Reads from the plain object getMessages() already returned.

0 network calls per render

@better-i18n/core

getMessages(locale) — served from the in-memory cache if it is warm.

60s TTL · 0 deps

CDN edge

Cloudflare worker answers from the nearest edge cache.

max-age=60 · always 200

R2 object store

The published translation files the sync worker wrote.

source of truth

Fallback chain — tried in order when a hop fails

1In-memory TTL cache
2CDN fetch, with timeout and one retry
3Persistent storage, if configured
4staticData bundled with the app
5Throw — after everything above missed

Write path — dashboard to app

AI or translator

Proposal reviewed in the dashboard, glossary enforced.

MCP · dashboard · CLI

Publish

Sync worker writes the locale files to R2.

better-i18n publish

CDN purge

Fire-and-forget purge of the affected keys and the manifest.

non-critical by design

Live in the app

The next getMessages() past the TTL returns the new copy.

~60s worst case

0dependencies in core
60scache TTL, client and edge
200CDN status, even on failure
5fallback layers before an error
Two ways

With the client, or with fetch

The client adds caching, retries and the fallback chain. If you would rather own that yourself, the CDN is a plain JSON endpoint.

locale.js
import { i18n } from './i18n.js'
import { normalizeLocale } from '@better-i18n/core'

let current = 'en'
let messages = await i18n.getMessages(current)

export async function setLocale(next) {
  // The CDN stores locales lowercased: pt-BR → pt-br
  current = normalizeLocale(next)
  messages = await i18n.getMessages(current)
  document.documentElement.lang = current
  render()
}
Formatting

Die JavaScript-Intl-API in der Praxis

Formatieren Sie Währungen, Datumsangaben und Ordnungszahlen mithilfe integrierter Intl-Konstruktoren mit lokalisierter Ausgabe in jedem modernen Browser oder jeder Node.js-Laufzeitumgebung.

format.jsjs
// Using the built-in Intl API
const formatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
});
console.log(formatter.format(1234.56)); // "1.234,56 €"

// Date formatting
const date = new Intl.DateTimeFormat('ja-JP', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
});
console.log(date.format(new Date())); // "2026年3月2日"

// Pluralization
const plural = new Intl.PluralRules('en');
const suffixes = { one: 'st', two: 'nd', few: 'rd', other: 'th' };
function ordinal(n) {
  return `${n}${suffixes[plural.select(n)]}`;
}
Capabilities

Funktionen der JavaScript-Intl-API

Integrierte Intl-API ohne externe Abhängigkeiten für grundlegende i18n-Funktionen
„Intl.NumberFormat“ für die lokalisierte Formatierung von Währungsangaben, Prozentwerten und Einheiten
Intl.DateTimeFormat für lokalisierungsspezifische Datums- und Zeitanzeigemuster
Internationale Regeln für die Pluralbildung von Ordnungs- und Kardinalzahlen in über 100 Sprachregionen
ICU-MessageFormat-Syntax für komplexe Nachrichten mit Pluralformen, Selektionen und Verschachtelungen
„Intl.RelativeTimeFormat“ für für Menschen lesbare relative Datumsangaben (z. B. „vor 3 Tagen“)
Intl.ListFormat für lokalisierungsfähige Konjunktsions- und Disjunktsionslisten
Intl.Collator für die lokalisierungsabhängige Sortierung und den Vergleich von Zeichenfolgen
Internationaler Segmentierer zur Erkennung von Wort-, Satz- und Graphemgrenzen

Entdecken Sie weitere Leitfäden zu Frameworks

Get started

Beginnen Sie noch heute mit der Lokalisierung von JavaScript

Verwalten Sie Ihre JavaScript-Übersetzungen mit KI-gestützten Workflows, CLI-Synchronisierung und CDN-Bereitstellung in weniger als 50 ms.