ECMA-402 Internationalization API

ECMAScript

Chrome 28 で ECMA-402 が実装されてたのを期に少し書いてみる。本当な Firefox Nightly でも一度は実装されたんだけど、バグがあったからか今はバックアウトしちゃって使えない。

確認したバージョン： 28.0.1500.11 (Official Build 199640) dev-m

i18n API と略して言ったりする。

ボクは全然詳しくないので触りの説明しかできないけど、ロケールに合わせたメソッドを提供する仕様/APIだ。

プログラミング言語って基本的には英語なので英語に合わせた値が返ってくることが多いが、言語によってはそれでは不相応な場合がある。例えば、Date オブジェクトをtoStringした時の値って英語圏なら "05/21/2013" だったり、日本語圏なら "2013/05/21" になったりする。こういう言語に合わせた出力をしようぜってのを提供するAPI

例のDateオブジェクトの場合

(new Date).toLocaleString("en-US", { year: "numeric", month: "2-digit", day: "2-digit" });
// = "05/21/2013"
(new Date).toLocaleString("en-US", { month: "long" });
// = "May"

(new Date).toLocaleString("ja-JP", { year: "numeric", month: "2-digit", day: "2-digit" });
// = "2013/05/21"
(new Date).toLocaleString("en-US", { month: "long" });
// = "5月"

ECMAScript への追加/変更要素

  • グローバルに Intl オブジェクトが追加
    • Intl.Collator([locales [, options]])
    • Intl.NumberFormat([locales [, options]])
    • Intl.DateTimeFormat([locales [, options]])
  • String
    • String.prototype.localeCompare(that, [, locales] [, options]])
    • String.prototype.toLocaleLowerCase([locales])
    • String.prototype.toLocaleUpperCase([locales])
  • Number
    • Number.prototype.toLocaleString([locales [, options]])
  • Date
    • Date.prototype.toLocaleString([locales [, options]])
    • Date.prototype.toLocaleDateString([locales [, options]])
    • Date.prototype.toLocaleTimeString([locales [, options]])

Intl オブジェクト

このオブジェクト配下に文字列比較、数値フォーマット、日付フォーマットをするメソッドを提供するコンストラクタがある。String.prototype, Number.prototype, Date.prototype 下の修正されたメソッドでも代用可能なようになっている。

詳しくないので用例しか挙げられない。詳細は上記に上げたリンク先を参照したり（さらにRFC***やISO***を参照する必要があるかも）、下記にMozillaのテストコードも挙げておくのでそちらを見てみたりして下さいな

Intl.Collator([locales [, options]])

主にArray.prototype.sort に渡すメソッドを提供すると思えばいいかな。

var list = ["a", "c", "b", ...];
var collator = new Intl.Collator("ja-JP");
list.sort(collator.compare)

// こちらでもOK
list.sort(function(a, b){
  return a.localeCompare(b, "ja-JP");
});
Intl.NumberFormat([locales [, options]])

数値のフォーマットを整形するメソッドを提供する

var list = [10, 100, 1000];
var numFormatter = new Intl.NumberFormat();
list.map(numFormatter.format); // => ["10", "100", "1,000"]

// スタイル(style)を通貨、通貨の対象(currency)を日本円に設定
numFormatter = new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" });
list.map(numFormatter.format); // => ["￥10", "￥100", "￥1,000"]

// こちらでもOK
(1000).toLocaleString("ja-JP", { style: "currency", currency: "JPY" })
Intl.DateTimeFormat([locales [, options]])

Dateオブジェクトのフォーマットに使用

var date = new Date;
var dateFormatter = new Intl.DateTimeFormat("ja-JP", { year: "numeric", month: "2-digit", day: "2-digit" });
dateFormatter.format(d); // => "2013/05/21"

// こちらでもOK
d.toLocaleString("ja-JP", { year: "numeric", month: "2-digit", day: "2-digit" }); // => "2013/05/21"

d.toLocaleString("ja-JP", { month: "2-digit" }); // => "05"
d.toLocaleString("ja-JP", { month: "long" }); // => "5月"

Mozilla にあるテストコード

使い方の参考に。

追記

Intl - JavaScript | MDNを見ると、Chrome 24から対応しているみたいだ...orz 日ごろ使っていないのがバレバレだった。