i18n nədir və niyə hər proqramçı bunu bilməlidir?

Proqramçıların çoxu çox maraqlı bir paradoks yaşayır. API-lər yazırıq, Docker qururuq, mikroservis memarlıq müzakirə edirik, amma UI-də mətnləri birbaşa kodun içinə yazırıq:

h1.innerText = "Ana səhifə";

Sonra müştəri deyir: "İngilis dili də olsun."

Və birdən kod bazası şüşə kimi çatlayır.

Burada səhnəyə çıxan anlayış i18n-dir.

i18n nə deməkdir?

i18n — "internationalization" sözünün qısaldılmış formasıdır. "i" ilə "n" arasında 18 hərf var.

Amma texniki olaraq i18n bu deyil.

i18n = Mətnləri koddan ayırmaq və dili sistem səviyyəsində idarə etmək.

Bu, tərcümə mexanizmi deyil.

Bu, memarlıq qərarıdır.

Niyə i18n lazımdır?

Əgər sən:

Məhsulu böyütmək istəyirsənsə
SEO etmək istəyirsənsə
Qlobal istifadəçi hədəfləyirsənsə
Gələcəkdə dili artırmaq ehtimalın varsa

onda i18n artıq seçim deyil.

Hard-coded string problemi

Belə kod yazmaq asandır:

if (lang === "az") {
    title.innerText = "Layihələr";
} else {
    title.innerText = "Projects";
}

Bu işləyir. Amma struktur olaraq zəifdir.

10 string → idarə olunur
100 string → qarışır
1000 string → kabus

i18n-in məqsədi kodu dil dəyişmələrindən azad etməkdir.

Əsas i18n məntiqi

Prinsip çox sadədir:

UI-də mətnlərə açar (key) verilir
Hər dil üçün ayrıca fayl olur
Sistem həmin açarı uyğun dildə əvəz edir

Sadə JS i18n sistemi

1. Dil faylları

/lang/az.json

{
  "nav.home": "Ana səhifə",
  "nav.projects": "Layihələr",
  "hero.title": "Privacy & AI Solutions",
  "hero.subtitle": "Scalable digital infrastructure"
}

/lang/en.json

{
  "nav.home": "Home",
  "nav.projects": "Projects",
  "hero.title": "Privacy & AI Solutions",
  "hero.subtitle": "Scalable digital infrastructure"
}

2. HTML

data-i18n="hero.title">h1> 
data-i18n="hero.subtitle">p>

3. JS Loader

let currentLang = localStorage.getItem("lang") || "az";
let translations = {};

async function loadLanguage(lang) {
    const response = await fetch(`/lang/${lang}.json`);
    translations = await response.json();
    applyTranslations();
}

function applyTranslations() {
    document.querySelectorAll("[data-i18n]").forEach(el => {
        const key = el.getAttribute("data-i18n");
        el.innerText = translations[key] || key;
    });
}

function changeLanguage(lang) {
    localStorage.setItem("lang", lang);
    loadLanguage(lang);
}

loadLanguage(currentLang);

Bu qədər. Heç bir framework yoxdur. Heç bir premium plugin yoxdur.

PHP ilə Server-Side i18n

Əgər backend PHP-dirsə, bunu server tərəfində də edə bilərsən.

/lang/az.php

 "Ana səhifə",
    "nav.projects" => "Layihələr",
    "hero.title" => "Privacy & AI Solutions"
];

index.php

$lang = $_GET['lang'] ?? 'az';
$translations = require "lang/$lang.php";

function t($key) {
global $translations;
return $translations[$key] ?? $key;
}
?>

Server render edir. SEO üçün daha uyğundur.

SEO və Multi-language Routing

Ən düzgün yanaşma:

site.com/az
site.com/en
site.com/ru

Niyə? Çünki:

Google bunu ayrıca səhifə kimi indeksləyir
hreflang istifadə etmək olur
Hər dil üçün meta title fərqli ola bilir

Bu artıq sadəcə tərcümə deyil. Bu SEO arxitekturasıdır.

Çətin hissə: Dinamik cümlələr

Sadə stringlər asandır. Çətinlik interpolation və plural məsələsindədir.

{"cart.items": "{count} məhsul səbətdədir"
}

JS interpolation:

function translate(key, vars = {}) {
    let text = translations[key] || key;
    Object.keys(vars).forEach(v => {
        text = text.replace(`{${v}}`, vars[v]);
    });
    return text;
}

translate("cart.items", { count: 3 });

Daha dərin problemlər

i18n təkcə mətn deyil. Daxildir:

Tarix formatı
Valyuta formatı
Saat formatı
RTL dillər (məsələn ərəb dili)
Plural qaydaları

Valyuta formatı üçün:

new Intl.NumberFormat('az-AZ', {
    style: 'currency',
    currency: 'AZN'
}).format(1200);

Bax burada artıq real beynəlxalqlaşma başlayır.

Ən böyük səhv

i18n-i sonradan əlavə etmək.

Əgər sən layihəni 1 dil üçün yazırsansa və sonra i18n əlavə edirsənsə, bütün kodu refactor etməli olursan.

Doğru yanaşma: Başlanğıcdan string-ləri ayır.

Niyə buna görə pul alırlar?

Çünki insanlar bunu "tərcümə" kimi görürlər. Amma i18n:

Struktur dizaynıdır
Komponent memarlığıdır
Genişlənmə qabiliyyətidir
Texniki borcun qarşısını almaqdır

Bu, kodun keyfiyyət göstəricisidir.

i18n = Məhsul səviyyəsi düşüncə

Bir məhsul 1 dil üçün yazılıbsa, o lokal layihədir.

Əgər məhsul i18n ilə yazılıbsa:

O, genişlənə bilir
O, investisiya üçün hazırdır
O, beynəlxalqlaşmaya hazırdır

Bu, artıq "string dəyişmə" deyil. Bu, sistem dizaynıdır.

Nəticə

i18n mürəkkəb deyil. Sadəcə sistemli düşüncə tələb edir. Hər proqramçı bunu edə bilər.

Əsas məsələ:

String-ləri ayır
Struktur qur
Routing planla
SEO nəzərə al
Gələcək dil artımını düşün

Qalan hər şey implementasiyadır.

Proqramçılıq çox vaxt alqoritm deyil. Çox vaxt düzgün struktur qurmaqdır.

i18n də elə bu strukturlardan biridir.