Quick Start

import i18n from '/path/i18n.js';
i18n.set({
    "resource": "/i18n.json", // Language file's path
    "locale": "en" // Default language key
}).init(function (dict) {
    // do something
    // console.log(this._("key"));
    // or
    // console.log(i18n._("key"));
});

Options

Usage

Set default language to "English" and get "hello"

let foo = i18n.set("locale", "en")._("hello"); // output "Hi there"

Multiple level

let foo = i18n._("anime"); // output "Anime and manga"
let foo = i18n._("anime.attact on titan"); // output "Attack on Titan"

Variables in string

By object

// Create user object
const user = {
    "name": "John",
    "age": 10
};

let foo = i18n._("intro", user);
// output "Hi, My name is John. I'm 10 years old."

By arguments

It will replace {...} by sequence number.

i18n._("intro", "john", "10");
// Or
i18n._("intro", ["john", 10]);
// output "Hi, My name is John. I'm 10 years old."

Change language

Set default language (will effects until set again).

let foo = i18n.set("locale", "en")._("hello");
// output "Hi there"

Get specific language without change default language.

let foo = i18n._("tw", "hello");
// output "你好"
let foo = i18n._("hello");
// still output "Hi there"

Auto translate

• You could use .translate() to make auto translate for i18n elements.
• Auto translate won't change the default language setting.

<div data-i18n="key">…</div>
<div data-i18n="key" data-i18n-pass="{&quot;name&quot;: &quot;value&quot;}">…</div>
<div data-i18n="key" data-i18n-pass="[&quot;value1&quot;, &quot;valu2&quot;]">…</div>

// Auto translate after initialized.
i18n.set("locale", "en").init(function () {
    this.translate();
});

// Auto translate in event
button.addEventListener("click", function () {
    // Do auto translate into "Traditional Chinese"
    i18n.translate("tw");
    // After translated, It will still output in "English".
    i18n._("key");
});

Datetime

Get current datetime in default format.

let foo = i18n.now();
// output "January 15, 2022 05:00:00"

Advanced

pass object to resource

const languages = {
    "en": {
        ...
    },
    "jp": {
        ...
    }
};

i18n.set({
    "resource": languages,
    "locale": "en"
}).init(function () {
    // this._("jp", "key");
});