ECMAScript 2016 I18n API

ECMAScript® 2016 Internationalization API Specification がECMAScript 2016と同時にリリースされた。
I18n APIってなんだよってことで、MDN読んでた。Intl – JavaScript | MDN
specは読んでもわからんので…

I18n系のライブラリはいくつもあるし、なんでそんなのあるのって言うの読んでた。
The ECMAScript Internationalization API

ES5にもES2015あたりにも、ちょっとだけ仕組みが入ってるのをおしすすめた。
各ライブラリが個別に再実装するはめになってる。でかい変換テーブルがいる。インターフェースを決める。

そのへんか。なるほど。
まあ例によってユーザーがそのままこのAPI使うわけではなく、ライブラリ作者が楽に高速になるよね、系のアレ。fetchとかみたいな。

ブラウザ実装状況見ると、
chrome 24, firefox 29, ie 11, opera 15, safari 未実装。
chrome for android 26。モバイルはあと未実装。
なので、あーというかんじ。
ただ、safari 10に実装されることが発表されているので、mac os x sierra, ios 10で入る。
将来的にはいい感じになりそう。

ここから下は、仕様の話じゃなくて、もうあるchromeとfirefoxの実装の話。注意。

あとはだいたいMDNからのコピペ。コードを動かしてみるのは主にchrome 51。

Intl

Intlという名前空間があって、その下にオブジェクトがあるのと、あとString, Number, Dateにメソッドが生えてる。

コンストラクタ
Intl.Collator
Intl.DateTimeFormat
Intl.NumberFormat
メソッド
String.prototype.localeCompare()
Number.prototype.toLocaleString()
Date.prototype.toLocaleString()
Date.prototype.toLocaleDateString()
Date.prototype.toLocaleTimeString()

String.prototype.localeCompare()

ウムラウト区別できても関係ないよなーと思ってた。
けど、ふとひらがなカタカナ半角カナで試してみたら、なるほどーとなった。
まあブラウザ実装依存なんだろうけど、おおーってならない? そうでもないか。

'a'.localeCompare('c');
-1
'check'.localeCompare('against');
1
'a'.localeCompare('a');
0
'ä'.localeCompare('z', 'de')
-1
'ä'.localeCompare('z', 'sv')
1

# ドイツとスウェーデンでソート順が違う。ここまでMDNコピペ

'あ'.localeCompare('ア')
-1
'あ'.localeCompare('ア', 'ja')
0
# !?
'あらすか'.localeCompare('アラスカ', 'ja')
0
'あらすか'.localeCompare('アらスカ', 'ja')
0
'あらすか'.localeCompare('アラスカ', 'ja')
0

Number.prototype.toLocaleString()

プリセットでいろいろある。通貨は結構うれしい。デフォルトプリセット気に入らなかったら、設定上書きできる。
数字部分だけ色変えたいとかあるのはまあ自分で文字列切り刻んだり文字列追加したりでやれってことかな。

var number = 123456.789;
undefined
number.toLocaleString()
"123,456.789"
number.toLocaleString('de-DE')
"123.456,789"
number.toLocaleString('ar-EG')
"١٢٣٬٤٥٦٫٧٨٩"
number.toLocaleString('en-IN')
"1,23,456.789"
number.toLocaleString('zh-Hans-CN-u-nu-hanidec')
"一二三,四五六.七八九"
number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })
"123.456,79 €"
number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })
"¥123,457"
number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY', minimumFractionDigits: 2 })
"¥123,456.79"

Date.prototype.toLocaleString()

chromeやるな。 平成って文字列出てきた。でもMDNと違うぞ。でfirefoxで動かしてみたらMDN通りになった。
やっぱりブラウザ間実装差が。

var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
undefined
date.toLocaleString('en-US')
"12/20/2012, 12:00:00 PM"
date.toLocaleString('en-GB')
"20/12/2012, 12:00:00"
date.toLocaleString('ja')
"2012/12/20 12:00:00"
date.toLocaleString('ar-EG')
"٢٠‏/١٢‏/٢٠١٢ ١٢:٠٠:٠٠ م"
date.toLocaleString('ko-KR')
"2012. 12. 20. 오후 12:00:00"
date.toLocaleString('ja-JP-u-ca-japanese')
"平成24/12/20 12:00:00"

firefox 47

var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
undefined
date.toLocaleString('en-US')
"12/20/2012, 12:00:00 PM"
date.toLocaleString('ja-JP-u-ca-japanese')
"24/12/20 12:00:00"

エレクトロンならワンちゃんあるかな。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中