国際サイトの日付をフォーマットするための最も確実な方法
日付の形式は地域や言語によって異なるため、ユーザーに言語や地域に固有の日付を表示する方法を見つけることができれば常に役に立ちます。.
2012年12月、ECMAはJavaScriptの国際化APIの仕様をリリースしました。国際化APIは、言語と言語仕様に従って特定のデータを表示するのに役立ちます。それはに使用することができます 通貨、タイムゾーンを特定する もっと.
この記事では、検討します 日付フォーマット このAPIを使う.
ユーザーのロケールを知っている
ユーザーの優先ロケールに従って日付を表示するには、まずその優先ロケールとは何かを知る必要があります。現在それを知るための最も確実な方法はユーザーに尋ねることです。ユーザーにWebページで好みの言語と地域の設定を選択させる.
しかし、それが選択肢ではない場合は、次のように解釈できます。 受け入れ言語
ヘッダを要求するか、または navigator.language
(ChromeおよびFirefoxの場合)または navigator.browserLanguage
(IEの場合)値.
これらのオプションのすべてがブラウザのUIの優先言語を返すわけではないことに注意してください。.
var language_tag = window.navigator.browserLanguage || window.navigator.language || "en"; // 'en-GB'のような言語タグを返します
国際化APIの確認
ブラウザが国際化APIをサポートしているかどうかを知るために、グローバルオブジェクトの存在を確認することができます。 国際空港
.
if(window.hasOwnProperty​( "Intl")&& typeof Intl === "object")//国際化APIが存在します。それを使用しましょう
の 国際空港 物
国際空港
国際化APIを使用するためのグローバルオブジェクトです。それは3つのオブジェクトのコンストラクタである3つのプロパティを持っています。 照合器
, NumberFormat
, そして DateTimeFormat
.
使用するオブジェクトは DateTimeFormat
これは、異なる言語に従って日付時刻をフォーマットするのに役立ちます。.
の DateTimeFormat 物
の DateTimeFormat
コンストラクターは2つのオプション引数を取ります。
ロケール
- たとえば、言語タグを表す文字列または文字列の配列。 “ド” ドイツ語用, “en-GB” イギリスで使用されている英語用。言語タグが言及されていない場合、デフォルトのロケールはランタイムのロケールになります。.オプション
- プロパティがフォーマッタのカスタマイズに使用されるオブジェクト。次のような性質があります。
物件 | 説明 | 可能な値 |
日 | 月の日 | “2桁”, “数値” |
時代 | 日付が当たる時代、例:BC | “狭い”, “ショート”, “長いです” |
formatMatcher | フォーマットマッチングに使用されるアルゴリズム | “基本的な”, “ベストフィット”[デフォルト] |
時 | 時間内の時間を表します | “2桁”, “数値” |
時間12 | 12時間表示本当の )または24時間制(偽 ) | 本当の , 偽 |
localeMatcher | ロケールマッチングに使用されるアルゴリズム | “見上げる”, “ベストフィット”[デフォルト] |
分 | 時間内の分 | “2桁”, “数値” |
月 | 一年のうちの月 | “2桁”, “数値”, “狭い”, “ショート”, “長いです” |
二番目 | 時間の秒 | “2桁”, “数値” |
タイムゾーン | 適用するタイムゾーン | “UTC”, デフォルトはランタイムタイムゾーンです。 |
timeZoneName | 日付のタイムゾーン | “ショート”, “長いです” |
平日 | 今週の一日 | “狭い”, “ショート”, “長いです” |
年 | 日付の年 | “2桁”, “数値” |
例:
var formatter = new Intl.DateTimeFormat( 'en-GB'); / *英国英語の日付形式で日付をフォーマットできるフォーマッタを返します* /
var options = weekday: 'short'; var formatter = new Intl.DateTimeFormat( 'en-GB'、オプション); / *木曜日の 'Thu'のように、短い表記法で平日とともにイギリスの日付形式*で日付をフォーマット設定できるフォーマッタを返します* /
の フォーマット 関数
のインスタンス DateTimeFormat
オブジェクトには、プロパティアクセサ(getter)が呼び出されています。 フォーマット
これは、をフォーマットする関数を返します。 日付
に基づく ロケール
そして オプション
にあります DateTimeFormat
実例.
関数は 日付
オブジェクトまたは 未定義
オプションの引数として ひも
要求された日付形式で.
注意: 引数が 未定義
または指定されていない場合は、の値を返します。 Date.now()
要求された日付形式で.
構文は次のとおりです。
new Intl.DateTimeFormat()。format()//現在の日付を実行時の日付形式で返します
それでは、簡単な日付フォーマットをコーディングしましょう。.
言語を変えて出力を見てみましょう.
今、オプションを調べる時が来ました.
の toLocaleDateString 方法
上記の例のようにフォーマッタを使う代わりに、 Date.prototype.toLocaleString
と同じように ロケール
そして オプション
引数、それらは似ていますが、それを使用することをお勧めします DateTimeFormat
あなたのアプリケーションであまりにも多くの日付を扱うときオブジェクト.
var mydate =新しい日付( '2015/04/22'); var options = weekday: "short"、year: "numeric"、month: "long"、day: "numeric"; console.log(mydate.toLocaleDateString( 'en-GB'、オプション)); //「2015年4月22日水曜日」を返します
テストする ロケール サポートされています
サポートされていることを確認する ロケール
, 私達は方法を使用してもいいです supportedLocalesOf
の DateTimeFormat
オブジェクトサポートしているすべてのロケールの配列、またはサポートしているロケールがない場合は空の配列を返します。.
テストのために、ダミーのロケールを追加しましょう “何とか” チェック対象のロケールのリスト内.
console.log(Intl.DateTimeFormat.supportedLocalesOf(["zh"、 "blah"、 "fa-pes"])); // Array ["zh"、 "fa-pes"]を返します
ブラウザのサポート
2015年4月末現在、主要ブラウザは国際化APIをサポートしています。.
参考文献
- ECMA International:ECMAScript国際化API仕様
- IANA:Language Subtag Registry
- Norbert's Corner:ECMAScript国際化API