Javascript i18n core

ver A.2.1 - MIT License

Playground

Single string

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

Name
Type
Description
resource string|object
Language file path or JSON object.
locale string
Language key
i18n_key string
An HTML data-* attribute name which use for Auto Translate to get elements. Defaults to i18n (data-i18n).
i18n_pass string
An HTML data-* attribute name which use for Auto Translate to pass the variables. Defaults to i18n-pass (data-i18n-pass).

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"
2024-10-09 04:20:11

Advanced

pass object to resource
const languages = {
    "en": {
        ...
    },
    "jp": {
        ...
    }
};

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

Language file

  • Must be JSON format.
  • The "key" could be any characters but not contains . ' and "
  • The variable's name in "Value" could be any characters and wrapping with bracket { and }.

Download Full Example.

{
    "Language Key": {
        // "__meta__" is only required for use i18n.now().
        "__meta__" {
            "datetime": "Datetime format",
            "timezone": "UTC offset",
            "day": ["abbr of day"...],
            "days": ["full name of day"...],
            "month": ["abbr of month"...],
            "months": ["full name of month"...]
        },
        // in String
        "String Key": "any characters",
        // in Object
        "String Key": {
            // "_" is the string of the "Parent"
            "_": "any characters",
            "String Key": "any characters",
            "String Key": {
                "String Key": "any characters"
            }
        }
    }
}