JavaScript Internationalization API（I18N）とは何ですか？

英語は世界で最も広く話されている言語ですが、英語を話すのは7人に1人だけです。これは3億7,900万人の第一言語（母国語）ですが、マンダリンを話す人は9億1,700万人、スペイン語を話す4億6,000万人、ヒンディー語を話す3億4100万人がいます。

英語を話すユーザーの多くは、新興市場に住んでおり、インターネットの成長が指数関数的に増加しています。 Webアプリケーションをグローバルに翻訳できる場合、潜在的なターゲット市場が700％増加する可能性があります！

JavaScript Internationalized API（I18Nとも呼ばれます）を使用すると、Webページとアプリケーションを設計して、異なる言語を話すユーザーのニーズに簡単に適応できるようにします。

この記事では、APIが提供するさまざまな方法と、より多くの国際的な視聴者に到達するためにコードにそれらを実装する方法について説明します。

キーポイント

JavaScript Internationalization API（I18N）は、さまざまな言語や文化的規範をサポートすることにより、グローバルな視聴者へのWebアプリケーションの適応を促進します。
INTLオブジェクトを使用して、開発者は地域によって異なる場合があるローカル設定に基づいて日付、時間、数値、およびリストをフォーマットできます。
APIには、ユーザーに馴染みのある形式で情報を提示するためにロケール識別子を受け入れる
• やIntl.DateTimeFormat()などの関数が含まれます。 Intl.NumberFormat() 相対的な時間書式設定（）などの高度な機能により、より微妙で文化的に準拠したアプリケーションが可能になります。
• Intl.RelativeTimeFormatその強力な機能にもかかわらず、JavaScript INTL APIは、言語と文化の違いを効果的に処理し、アプリケーションが真に国際化されるようにするために慎重に実装する必要があります。 Intl.PluralRules
• Internationalization（i18n）はトリッキーな場合があります
国際化は簡単に見えます…

あなたがそれをしようとするまで

。

ラテン語ベースの言語は、表面上で類似している場合があります。たとえば、名前、電子メール、日付を要求するフォームは、次のように翻訳されます。 スペイン語：nombre、email、fecha

フランス語：nom、電子メール、日付

ドイツ語：名前、電子メール、datum
• GetText Internationalization and Localization Systemsは何十年も前から存在しており、ほとんどのプログラミング言語にはライブラリが利用可能です。
• 簡単な場合、トークン化フォームを使用できます。たとえば、以下を含むHTMLテンプレートを使用してください。

これは、ユーザーが英語を主要な言語として設定したときに、

"name"

を動的に置き換えます。残念ながら、これはユーザーインターフェイスの問題が表示され始める場所です。

1. 同じ言語には異なるバリエーションがある場合があります。スペインでのスペイン語の使用は、南アメリカとまったく同じではありません。
1つの言語の単語は、他の言語でははるかに長く成長する場合があります。たとえば、「電子メール」はロシア語で「эfiedofhe）として「эする問」と翻訳されています。
テキストは、常に左から右に配置されるとは限りません。アラビア語、ヘブライ語、クルド語、イディッシュ語など、右から左に書かれたものもあります。他の言語は、中国語、韓国語、日本、台湾など、上から下まで書くことができます。

テキストを最小限に抑え、方向、書き込みパターン、論理的次元などのCSSプロパティをレイアウトすることで、多くの問題を解決できます。

混乱という用語

アプリケーションが日付、時間、数値、通貨、またはユニットを表示する必要がある場合、さらなる混乱が発生します。

日付を「12/03/24」と表示することを検討してください。それは次のように解釈されます：

MDY形式を使用している居住者は、「2024年12月3日」と解釈します。
• ヨーロッパ、南アメリカ、アジアの住民は、それを「2024年3月12日」と解釈しました。 カナダ、中国、日本、ハンガリーの住民は、より実用的なYMD形式を使用して「2012年3月24日」と解釈します。
• （日付セパレーターのスラッシュはすべての言語で一般的に使用されていないことに注意してください！）
番号「1,000」は次のように解釈されます

米国、英国、カナダ、中国、日本の人々は、それを「1000」と解釈します スペイン、フランス、ドイツ、ロシアの人々は、これらの国の小数がコンマで分離されているため、「1つ（ポイントゼロ）」と解釈するでしょう。

英語だけでも、状況は複雑になる可能性があります。 「1,000メートル」という用語は、次のことを意味します

米国居住者の場合は
• 1 km（または0.62マイル）
• 英国、カナダ、オーストラリアの人々にとって、それは千の測定器のコレクションです！

javascript intl api

ほとんど知られていないJavaScript Intlオブジェクトは、ほとんどの最新のブラウザーとランタイムでECMAScript Internationalized APIを実装しています。サポートは通常良好であり、IE11でさえもっと多くの有用な方法があります。古いブラウザの場合、ポリフィルがあり、APIはこのように検出できます。
APIは少し珍しいです。日付、時間、数字、および構成パラメーターを含むオプションのオブジェクトを通過するリスト、リストにいくつかのオブジェクトコンストラクターを提供します。たとえば、これはアメリカの英語を指定するDateTimeオブジェクトです。
• このオブジェクトを複数回使用して、日付（）値（または使用可能なES6時間）を渡すさまざまな方法を呼び出すことができます。通常、フォーマットメソッドは最も実用的なオプションです。たとえば、

または、コードの行でINTLオブジェクトを作成して、メソッドを実行できます。

format（）メソッドに加えて、一部のオブジェクトは次の方法もサポートしています。

• formattoparts（）：フォーマットされた文字列を含むオブジェクトの配列を返します。たとえば、{type： 'weekday'、value： 'manday'}
• ResolvedOptions（）：DateFormatter.ResolvedOptions（）。ロケールなど、使用されるロケールおよびフォーマットオプションを反映するプロパティを含む新しいオブジェクトを返します。

ロケールを定義します

すべてのINTLオブジェクトには、ロケールパラメーターが必要です。これは、識別する文字列です

言語subtag
スクリプトsubtag（オプション）
リージョン（または国）サブタグ（オプション）
1つ以上のバリアントサブタグ（オプション）
1つ以上のBCP 47拡張シーケンス（オプション）
特別な目的拡張シーケンス（オプション）
通常、言語と地域で十分です。たとえば、「en-us」、「fr-fr」など

文字列を使用することに加えて、intl.localeオブジェクトを使用して、米国英語などのロケールを12時間形式で構築することもできます。

これは、別のINTLコンストラクターで使用できます。たとえば、

<code><label> for="name"></label>{{ NAME }}>
</code>

ロケールが定義されていない場合、デバイスの現在の言語と地域設定が使用されます。たとえば、

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

これは、米国に設定されたデバイスで「5/4/2022」、英国に設定されたデバイスで「04/05/2022」を返します。

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

日付と時刻

次のツールは、intl.dateTimeFormat（）を使用してフォーマットされた日付と時間の例を示しています（言語や地域がリストされていない場合は、深く申し訳ありません！）：

（Codepenの例はここに埋め込む必要がありますが、外部リソースを直接埋め込むことができないため、テキストの説明のみを提供できます。）Codepenの例異なる日付スタイル（フル、ロング、ミディアム、ショート）およびタイムスタイル（フル、ロング、ミディアム、ショート）、およびカレンダー、タイムゾーンなどの他のオプションを含む

。

コンストラクターはロケールとオプションオブジェクトを渡します。これには多くの可能なプロパティがありますが、DatestyleやTimestyleを超える必要はほとんどありません。 Intl.DateTimeFormat()（ここではテーブルですが、テーブルを直接作成できないため、テキストの説明のみを提供できます。）テーブルには、

、

、、

、

>、Intl.DateTimeFormat()、dateStyle、timeStyle、calendar、dayPeriod、numberingSystem、localeMatcher、timeZone、hour12、、hourCycle、formatMatcher、weekday、era、year、month、day、hour、minute、secondなど。 timeZoneName

例：

<code>const valentinesDay = dateFormatter.format( new Date('2022-02-14') );
// 返回美国格式“2/14/2022”

const starwarsDay = dateFormatter.format( new Date('2022-05-04') );
// 返回美国格式“5/4/2022”
</code>

日付範囲

formatrange（）メソッドは、2つの日付を取り、ロケールとオプションに応じて、最も簡潔な方法で期間をフォーマットします。たとえば、

<code>const starwarsDay = new Intl.DateTimeFormat('en-US').format( new Date('2022-05-04') );
</code>

このメソッドには、ブラウザのサポート範囲が小さくなりますが、Chrome 76に実装されています。

相対期間

intl.relativetimeformat（）オブジェクトは、このモーメントに比べて期間を表示できます。オプションオブジェクトにはオプションが少なくなります：

（ここではテーブルですが、テーブルを直接作成できないため、テキストの説明のみを提供できます。）テーブルには、Intl.RelativeTimeFormat()、localeMatcher、、numeric、style>待ってください。

format（）メソッドは、値と単位を渡します：「year "、" Quarter "、" month "、" week "、" day "、" hour "、" minute "、または" second "。例：

<code><label> for="name"></label>{{ NAME }}>
</code>

デジタル、通貨、パーセンテージ、ユニット

次のツールは、intl.numberformat（）を使用した数値、通貨、パーセンテージ、および測定単位のフォーマットの例を示しています。

（Codepenの例はここに埋め込む必要がありますが、外部リソースを直接埋め込むことができないため、テキストの説明のみを提供できます。）Codepenの例は、異なる地域の数字、通貨、パーセンテージ、ユニットをフォーマットする方法を示しています。さまざまなスタイル（小数、通貨、パーセント、単位）を含む

を使用した言語、およびIntl.NumberFormat()、notation、currency、currencyDisplay、unit、unitDisplay、、useGrouping、minimumIntegerDigits、minimumFractionDigits、maximumFractionDigits、minimumSignificantDigits、maximumSignificantDigits、🎜>、

、

、

など。

Intl.NumberFormat()コンストラクターはロケールとオプションオブジェクトを渡します：numberingSystem notation（ここではテーブルですが、テーブルを直接作成できないため、テキストの説明のみを提供できます。）テーブルには、style、currency、、currencyDisplay、currencySign>、unit、unitDisplay、useGrouping、minimumIntegerDigits、minimumFractionDigits、maximumFractionDigits、minimumSignificantDigits、maximumSignificantDigits、

、、

、

、

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

、

、

など。

例：

リストIntl.ListFormat() typeintl.listformat（）オブジェクトは、一連のアイテムを言語に敏感なリストにフォーマットできます。英語では、これには通常、最後のアイテムの前に「または」または「または」を追加する必要があります。 style

次のプロパティはオプションオブジェクトで設定できます。

（ここではテーブルですが、テーブルを直接作成できないため、テキストの説明のみを提供できます。）テーブルには、

、

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

、など

例：

複数 わずかに奇妙なintl.pluralrules（）オブジェクトは、複数のアイテムがある複数の敏感な言語ルールをサポートしています。オプションオブジェクトは、タイププロパティを次のように設定できます。

• ベース：物の数（デフォルト値）、または
• 順序番号：英語で1枚目、2番目、3番目などのもののランキング

select（）メソッドは、数値の複数カテゴリを表す英語の文字列を返します（ゼロ、1、2、少数派、多数派、またはその他）。

例：

<code><label> for="name"></label>{{ NAME }}>
</code>

文字列比較

最後に、intl.collat​​or（）オブジェクトは、言語に敏感な文字列比較をサポートします。そのオプションオブジェクトは、次のプロパティを設定できます

（ここではテーブルですが、テーブルを直接作成できないため、テキストの説明のみを提供できます。）テーブルには、

、Intl.Collator()、などcollation numeric比較（）メソッドは2つの文字列を比較します。たとえば、

利益！

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

JavaScriptを使用してデータを表示する場合、ユーザーのローカル形式で情報を直接表示できるはずです。たとえば、次のコードは、INTL Short Dateフォーマットを使用するDateFormat（）関数を定義します。

これ自体は、国際的な聴衆にとってアプリケーションを容易にすることはできませんが、グローバルな流通に近い最初のステップです。 JavaScript Internationalization API（i18n）についての

FAQ（FAQ）

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

JavaScript Internationalization API（I18N）の目的は何ですか？

JavaScript Internationalization API（I18Nとも呼ばれます）は、言語に敏感な文字列比較、数値フォーマット、および日付と時刻のフォーマットを提供する組み込みのJavaScript APIです。これにより、開発者はさまざまな言語や文化的慣習をサポートすることにより、アプリケーションを国際化できます。これは、世界中で使用されるアプリケーションに特に役立ちます。さまざまな地域の言語と形式の規則に適応できるためです。

JavaScript i18nは日付と時刻のフォーマットをどのように処理しますか？

JavaScript i18nは、異なる文化的慣習に従って日付と時間をフォーマットするために使用できるDateTimeFormatオブジェクトを提供します。このオブジェクトは、ロケールとオプションオブジェクトをパラメーターとして使用し、使用するフォーマット慣習を定義します。オプションオブジェクトは、日付、時刻、タイムゾーン、および日付および時刻形式のその他の側面の形式を指定できます。

JavaScript i18nでデジタルフォーマットを処理する方法は？

javaScript i18nは、異なる文化的条約に従って数字をフォーマットするために使用できるナンバーフォーマットオブジェクトを提供します。このオブジェクトは、ロケールとオプションオブジェクトをパラメーターとして使用し、使用するフォーマット慣習を定義します。オプションオブジェクトは、数値（小数、パーセンテージ、または通貨）のスタイル、グループセパレータの使用、最小および最大小数の場所、および数値形式のその他の側面を指定できます。

JavaScript i18nで文字列比較を処理する方法は？

javaScript i18nは、異なる文化的慣習に従って文字列を比較するために使用できるコレーターオブジェクトを提供します。このオブジェクトは、ロケールとオプションオブジェクトをパラメーターとして取得し、使用する比較慣習を定義します。オプションオブジェクトは、比較の感度（基本、アクセント、ケース、またはバリアント）、数値ソートの使用、および文字列比較のその他の側面を指定できます。

JavaScript i18nのロケールを指定する方法は？

DateTimeFormat、Numberformat、またはCollat​​orオブジェクトを作成すると、ロケールをパラメーターとして指定できます。ロケールは、アメリカ英語の「en-us」やフランスで使用されているフランス語では「fr-fr」など、言語と地域を表す文字列です。ロケールが指定されていない場合、JavaScript環境のデフォルトのロケールが使用されます。

JavaScript I18Nで複数のロケールを使用できますか？

はい、DateTimeFormat、Numberformat、またはCollat​​orオブジェクトを作成するとき、アレイとして複数のロケールを指定できます。 JavaScript I18Nは、アレイでサポートする最初のロケールを使用します。これは、複数の地域で使用されるアプリケーションに非常に役立ちます。これにより、異なる地域の言語と形式の規則に適応することができます。

JavaScript i18nのフォーマットオプションをカスタマイズする方法は？

DateTimeFormat、Numberformat、またはCollat​​orオブジェクトを作成する場合、オプションオブジェクトを提供してJavaScript I18Nのフォーマットオプションをカスタマイズできます。オプションオブジェクトは、日付や数字の形式、文字列比較の感度など、フォーマットまたは比較の側面を指定できます。

JavaScript i18nを他のJavaScript APIで使用できますか？

はい、JavaScript I18Nは、他のJavaScript APIと組み合わせて使用​​できます。たとえば、DateTimeFormatオブジェクトを備えた日付オブジェクトを使用して日付をフォーマットするか、Numberformatオブジェクトを持つ番号オブジェクトを使用して数字をフォーマットすることもできます。これにより、JavaScriptの力を利用して、アプリケーションを国際化することができます。

JavaScript i18nはすべてのブラウザーによってサポートされていますか？

ほとんどの最新のブラウザー（Chrome、Firefox、Safari、Edgeを含む）はJavaScript i18nをサポートしています。ただし、古いブラウザやモバイルブラウザではサポートされていない場合があります。ブラウザーサポートに関する最新情報については、Mozilla Developer Network（MDN）の互換性テーブルを表示できます。

JavaScript i18nの詳細はどこで学ぶことができますか？

公式のECMAScript International API仕様、Mozilla Developer Network（MDN）、およびさまざまなオンラインチュートリアルや記事からJavaScript I18Nの詳細をご覧ください。これらのリソースは、APIとその使用に関する詳細な情報、およびJavaScriptアプリケーションを国際化するための例とベストプラクティスを提供します。

以上がJavaScript Internationalization API（I18N）とは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。