Javascript Internationalization Object All In One

Intl API

i18n

Javascript Internationalization Object All In One

Intl API

i18n & L10n

The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting. The Intl object provides access to several constructors as well as functionality common to the internationalization constructors and other language sensitive functions.

Intl.getCanonicalLocales()

Intl.supportedValuesOf()

Intl.Collator

Intl.DateTimeFormat

Intl.ListFormat

Intl.NumberFormat

Intl.PluralRules

Intl.RelativeTimeFormat

Intl.Segmenter

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl

demos

Intl.Collator

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator

Intl.DateTimeFormat

// UTC

const utc = Date.UTC(2020, 11, 20, 3, 23, 16, 738)

const date = new Date(utc);

const zhDate = new Intl.DateTimeFormat('zh-CN').format(date);

const usDate = new Intl.DateTimeFormat('en-US').format(date);

const deDate = new Intl.DateTimeFormat('de').format(date);

log(`zhDate =`, zhDate);

log(`usDate =`, usDate);

log(`deDate =`, deDate);

// zhDate = 2020/12/20

// usDate = 12/20/2020

// deDate = 20.12.2020

const enDate = new Intl.DateTimeFormat('en-GB').format(date);

// enDate = 20/12/2020

const getFormatDate = (local = `zh-CN`, date = new Date(), options) => {

return new Intl.DateTimeFormat(local, {...options}).format(date);

};

// sometimes even the US needs 24-hour time

const usOptions = {

year: "numeric",

month: "numeric",

day: "numeric",

hour: "numeric",

minute: "numeric",

second: "numeric",

hour12: false,

timeZone: "America/Los_Angeles",

};

/////////////////////////////

/// ECMAScript Internationalization API

/////////////////////////////

declare namespace Intl {

interface CollatorOptions {

usage?: string | undefined;

localeMatcher?: string | undefined;

numeric?: boolean | undefined;

caseFirst?: string | undefined;

sensitivity?: string | undefined;

ignorePunctuation?: boolean | undefined;

}

interface ResolvedCollatorOptions {

locale: string;

usage: string;

sensitivity: string;

ignorePunctuation: boolean;

collation: string;

caseFirst: string;

numeric: boolean;

}

interface Collator {

compare(x: string, y: string): number;

resolvedOptions(): ResolvedCollatorOptions;

}

var Collator: {

new(locales?: string | string[], options?: CollatorOptions): Collator;

(locales?: string | string[], options?: CollatorOptions): Collator;

supportedLocalesOf(locales: string | string[], options?: CollatorOptions): string[];

};

interface NumberFormatOptions {

localeMatcher?: string | undefined;

style?: string | undefined;

currency?: string | undefined;

currencySign?: string | undefined;

useGrouping?: boolean | undefined;

minimumIntegerDigits?: number | undefined;

minimumFractionDigits?: number | undefined;

maximumFractionDigits?: number | undefined;

minimumSignificantDigits?: number | undefined;

maximumSignificantDigits?: number | undefined;

}

interface ResolvedNumberFormatOptions {

locale: string;

numberingSystem: string;

style: string;

currency?: string;

minimumIntegerDigits: number;

minimumFractionDigits: number;

maximumFractionDigits: number;

minimumSignificantDigits?: number;

maximumSignificantDigits?: number;

useGrouping: boolean;

}

interface NumberFormat {

format(value: number): string;

resolvedOptions(): ResolvedNumberFormatOptions;

}

var NumberFormat: {

new(locales?: string | string[], options?: NumberFormatOptions): NumberFormat;

(locales?: string | string[], options?: NumberFormatOptions): NumberFormat;

supportedLocalesOf(locales: string | string[], options?: NumberFormatOptions): string[];

readonly prototype: NumberFormat;

};

interface DateTimeFormatOptions {

localeMatcher?: "best fit" | "lookup" | undefined;

weekday?: "long" | "short" | "narrow" | undefined;

era?: "long" | "short" | "narrow" | undefined;

year?: "numeric" | "2-digit" | undefined;

month?: "numeric" | "2-digit" | "long" | "short" | "narrow" | undefined;

day?: "numeric" | "2-digit" | undefined;

hour?: "numeric" | "2-digit" | undefined;

minute?: "numeric" | "2-digit" | undefined;

second?: "numeric" | "2-digit" | undefined;

timeZoneName?: "short" | "long" | "shortOffset" | "longOffset" | "shortGeneric" | "longGeneric" | undefined;

formatMatcher?: "best fit" | "basic" | undefined;

hour12?: boolean | undefined;

timeZone?: string | undefined;

}

interface ResolvedDateTimeFormatOptions {

locale: string;

calendar: string;

numberingSystem: string;

timeZone: string;

hour12?: boolean;

weekday?: string;

era?: string;

year?: string;

month?: string;

day?: string;

hour?: string;

minute?: string;

second?: string;

timeZoneName?: string;

}

interface DateTimeFormat {

format(date?: Date | number): string;

resolvedOptions(): ResolvedDateTimeFormatOptions;

}

var DateTimeFormat: {

new(locales?: string | string[], options?: DateTimeFormatOptions): DateTimeFormat;

(locales?: string | string[], options?: DateTimeFormatOptions): DateTimeFormat;

supportedLocalesOf(locales: string | string[], options?: DateTimeFormatOptions): string[];

readonly prototype: DateTimeFormat;

};

}

interface DateTimeFormatOptions {

localeMatcher?: "best fit" | "lookup" | undefined;

weekday?: "long" | "short" | "narrow" | undefined;

era?: "long" | "short" | "narrow" | undefined;

year?: "numeric" | "2-digit" | undefined;

month?: "numeric" | "2-digit" | "long" | "short" | "narrow" | undefined;

day?: "numeric" | "2-digit" | undefined;

hour?: "numeric" | "2-digit" | undefined;

minute?: "numeric" | "2-digit" | undefined;

second?: "numeric" | "2-digit" | undefined;

timeZoneName?: "short" | "long" | "shortOffset" | "longOffset" | "shortGeneric" | "longGeneric" | undefined;

formatMatcher?: "best fit" | "basic" | undefined;

hour12?: boolean | undefined;

timeZone?: string | undefined;

}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat

Date

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Temporal

https://tc39.es/proposal-temporal/docs/index.html

Intl.ListFormat

const log = console.log;

const getListFormat = (local = `zh-CN`) => {

return new Intl.ListFormat(local);

};

const zhListFormat = getListFormat();

const usListFormat = getListFormat('en-US');

// ❌ Uncaught TypeError: Iterable yielded 1 which is not a string at ListFormat.format ()

// const nums = [1,2,3,4,5,6,7];

const strs =  ['1', '2', '3', '4', '5', '6', '7'];

const zhArr = zhListFormat.format(strs);

log(`zhArr =`, zhArr);

const usArr = usListFormat.format(strs);

log(`usArr =`, usArr);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat

Intl.NumberFormat

const usCurrency = new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'});

usCurrency.format(1234567890);

// '$1,234,567,890.00

const zhCurrency = new Intl.NumberFormat('zh-CN', {style: 'currency', currency: 'CNY'})

zhCurrency.format(1234567890);

// '¥1,234,567,890.00'

const zhCurrency = new Intl.NumberFormat('zh-CN', {style: 'currency', currency: 'RMB'})

zhCurrency.format(1234567890);

// 'RMB 1,234,567,890.00'

const zhCurrency = new Intl.NumberFormat('zh-CN', {style: 'currency', currency: 'yuan'})

// ❌ Uncaught RangeError: Invalid currency code : yuan at new NumberFormat ()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat

currency code / 货币代码

China CNY / RMB ❓

Territory / Currency code (ISO 4217) / Currency name

领土

货币代码 (ISO 4217)

货币名称

China

CNY

yuan/元

United State

USD

dollar/美元

United Kingdom

GBP

sterling/英镑

Russian Federation

RUB

ruble/卢布

https://taxsummaries.pwc.com/glossary/currency-codes

https://en.wikipedia.org/wiki/ISO_4217

https://www.iso.org/iso-4217-currency-codes.html

国家货币代码

https://www.iban.com/currency-codes

https://www.iban.hk/currency-codes

const usCompact = new Intl.NumberFormat('en-US', {notation: 'compact'});

usCompact.format(1234567890);

// '1.2B'

usCompact.format(1234567);

// '1.2M'

usCompact.format(1234);

// '1.2K'

usCompact.format(123);

// '123'

const zhCompact = new Intl.NumberFormat('zh-CN', {notation: 'compact'});

zhCompact.format(1234567890);

// '12亿'

zhCompact.format(1234567);

// '123万'

zhCompact.format(12345);

// '1.2万'

zhCompact.format(1234);

// '1234'

zhCompact.format(123);

// '123'

(🐞 反爬虫测试!打击盗版⚠️)如果你看到这个信息, 说明这是一篇剽窃的文章,请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章!

refs

https://egghead.io/courses/javascript-internationalization-object-b62d898e

https://www.cnblogs.com/xgqfrms/p/5593291.html

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!

原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!

精彩链接

评论可见,请评论后查看内容,谢谢!!!评论后请刷新页面。