intl-guidelines.md 15.6 KB
Newer Older
S
shawn_he 已提交
1
# Internationalization Development (Intl)
H
HelloCrease 已提交
2

S
shawn_he 已提交
3 4
This module provides basic I18N capabilities, such as time and date formatting, number formatting, and string sorting, through the standard I18N interfaces defined in ECMA 402.
The [I18N](i18n-guidelines.md) module provides enhanced I18N capabilities through supplementary interfaces that are not defined in ECMA 402. It works with the Intl module to provide a complete suite of I18N capabilities.
H
HelloCrease 已提交
5

S
shawn_he 已提交
6 7
> **NOTE**
> 
8 9
> In the code snippets in this document, **intl** refers to the name of the imported module.

H
HelloCrease 已提交
10 11
## Setting Locale Information

12
Use [Locale](../reference/apis/js-apis-intl.md) APIs to maximize or minimize locale information.
H
HelloCrease 已提交
13 14 15 16


### Available APIs

17
| Module | API | Description | 
H
HelloCrease 已提交
18 19 20 21 22 23 24 25 26 27
| -------- | -------- | -------- |
| ohos.intl | constructor()<sup>8+</sup> | Instantiates a **Locale** object. | 
| ohos.intl | constructor(locale?: string, options?: options) | Instantiates a **Locale** object based on the locale parameter and options. | 
| ohos.intl | toString(): string | Converts locale information into a string. | 
| ohos.intl | maximize(): Locale | Maximizes locale information. | 
| ohos.intl | minimize(): Locale | Minimizes locale information. | 


### How to Develop

S
shawn_he 已提交
28 29
1. Instantiate a **Locale** object.

30
   Create a **Locale** object by using the **Locale** constructor. This method receives a string representing the locale and an optional [Attributes](../reference/apis/js-apis-intl.md) list. 
H
HelloCrease 已提交
31

S
shawn_he 已提交
32 33 34 35 36 37 38 39 40 41 42 43 44 45
   A **Locale** object consists of four parts: language, script, region, and extension, which are separated by using a hyphen (-).
   -  Language: mandatory. It is represented by a two-letter or three-letter code as defined in ISO-639. For example, **en** indicates English and **zh** indicates Chinese.
   -  Script: optional. It is represented by a four-letter code as defined in ISO-15924. The first letter is in uppercase, and the remaining three letters are in lowercase. For example, **Hant** represents the traditional Chinese, and **Hans** represents the simplified Chinese.
   -  Country or region: optional. It is represented by two-letter code as defined in ISO-3166. Both letters are in uppercase. For example, **CN** represents China, and **US** represents the United States.
   -  Extensions: optional. Each extension consists of two parts, key and value. Currently, the extensions listed in the following table are supported (see BCP 47 Extensions). Extensions can be in any sequence and are written in the format of **-key-value**. They are appended to the language, script, and region by using **-u**. For example, **zh-u-nu-latn-ca-chinese** indicates that the Latin numbering system and Chinese calendar system are used. Extensions can also be passed via the second parameter.
      | Extended Parameter ID| Description|
      | -------- | -------- |
      | ca | Calendar algorithm.|
      | co | Collation type.|
      | hc | Hour cycle.|
      | nu | Numbering system.|
      | kn | Whether numeric collation is used when sorting or comparing strings.|
      | kf | Whether upper case or lower case is considered when sorting or comparing strings.|

H
HelloCrease 已提交
46
   
S
shawn_he 已提交
47
   ```js
H
HelloCrease 已提交
48 49 50 51 52
   var locale = "zh-CN";
   var options = {caseFirst: false, calendar: "chinese", collation: pinyin};
   var localeObj = new intl.Locale(locale, options);
   ```

S
shawn_he 已提交
53 54
2. Obtain the string representing a **Locale** object.

55
   Call the **toString** method to obtain the string representing a **Locale** object, which includes the language, region, and other options.
G
ge-yafang 已提交
56
   
S
shawn_he 已提交
57
   ```js
H
HelloCrease 已提交
58 59 60
   var localeStr = localeObj.toString();
   ```

S
shawn_he 已提交
61 62
3. Maximize locale information.

63
   Call the **maximize** method to maximize locale information; that is, supplement the missing script and region information.
G
ge-yafang 已提交
64
   
S
shawn_he 已提交
65
   ```js
H
HelloCrease 已提交
66 67 68
   var maximizedLocale = localeObj.maximize();
   ```

S
shawn_he 已提交
69 70
4. Minimize locale information.

71
   Call the **minimize** method to minimize locale information; that is, delete the unnecessary script and region information.
G
ge-yafang 已提交
72
   
S
shawn_he 已提交
73
   ```js
H
HelloCrease 已提交
74 75 76 77 78 79
   var minimizedLocale = localeObj.minimize();
   ```


## Formatting the Date and Time

80
Use [DateTimeFormat](../reference/apis/js-apis-intl.md) APIs to format the date and time for a specific locale.
H
HelloCrease 已提交
81 82 83 84


### Available APIs

85
| Module | API | Description | 
H
HelloCrease 已提交
86 87 88 89 90 91 92 93 94 95
| -------- | -------- | -------- |
| ohos.intl | constructor()<sup>8+</sup> | Creates a **DateTimeFormat** object. | 
| ohos.intl | constructor(locale: string \| Array&lt;string&gt;, options?: DateTimeOptions) | Creates a **DateTimeFormat** object and sets the locale and other formatting-related attributes. | 
| ohos.intl | format(date: Date): string | Calculates the date and time based on the locale and other formatting-related attributes of the **DateTimeFormat** object. | 
| ohos.intl | formatRange(startDate: Date, endDate: Date): string | Calculates the period based on the locale and other formatting-related attributes of the **DateTimeFormat** object. | 
| ohos.intl | resolvedOptions(): DateTimeOptions | Obtains the related attributes of the **DateTimeFormat** object. | 


### How to Develop

S
shawn_he 已提交
96 97
1. Instantiate a **DateTimeFormat** object.

98
   Use the default constructor of **DateTimeFormat** to obtain the system default locale by accessing the system language and region settings, and set it as the locale in the **DateTimeFormat** object.
H
HelloCrease 已提交
99 100

   
S
shawn_he 已提交
101
   ```js
H
HelloCrease 已提交
102 103 104
   var dateTimeFormat = new intl.DateTimeFormat();
   ```

105
   Alternatively, use your own locale and formatting parameters to create a **DateTimeFormat** object. Formatting parameters are optional. For a full list of formatting parameters, see [DateTimeOptions](../reference/apis/js-apis-intl.md).
H
HelloCrease 已提交
106
   
S
shawn_he 已提交
107
   ```js
H
HelloCrease 已提交
108 109 110 111
   var options = {dateStyle: "full", timeStyle: "full"};
   var dateTimeFormat = new intl.DateTimeFormat("zh-CN", options);
   ```

S
shawn_he 已提交
112 113
2. Format the date and time.

114
   Call the **format** method to format the date and time in the **DateTimeFormat** object. This method returns a string representing the formatting result.
G
ge-yafang 已提交
115
   
S
shawn_he 已提交
116
   ```js
H
HelloCrease 已提交
117 118 119 120
   Date date = new Date();
   var formatResult = dateTimeFormat.format(date);
   ```

S
shawn_he 已提交
121 122
3. Format a period.

123
   Call the **formatRange** method to format the period in the **DateTimeFormat** object. This method requires input of two **Date** objects, which respectively indicate the start date and end date of a period. This method returns a string representing the formatting result.
G
ge-yafang 已提交
124
   
S
shawn_he 已提交
125
   ```js
H
HelloCrease 已提交
126 127 128 129 130
   Date startDate = new Date();
   Date endDate = new Date();
   var formatResult = dateTimeFormat.formatRange(startDate, endDate);
   ```

S
shawn_he 已提交
131 132
4. Obtain attributes of the **DateTimeFormat** object.

133
   Call the **resolvedOptions** method to obtain attributes of the **DateTimeFormat** object. This method will return an array that contains all attributes and values of the object.
G
ge-yafang 已提交
134
   
S
shawn_he 已提交
135
   ```js
H
HelloCrease 已提交
136 137 138 139
   var options = dateTimeFormat.resolvedOptions();
   ```


140
## Formatting Numbers
H
HelloCrease 已提交
141

142
Use [NumberFormat](../reference/apis/js-apis-intl.md) APIs to format numbers for a specific locale.
H
HelloCrease 已提交
143 144 145 146


### Available APIs

147
| Module | API | Description | 
H
HelloCrease 已提交
148 149 150 151
| -------- | -------- | -------- |
| ohos.intl | constructor()<sup>8+</sup> | Creates a **NumberFormat** object. | 
| ohos.intl | constructor(locale: string \| Array&lt;string&gt;, options?: NumberOptions) | Creates a **NumberFormat** object and sets the locale and other formatting-related attributes. | 
| ohos.intl | format(number: number): string | Calculates the number based on the locale and other formatting-related attributes of the **NumberFormat** object. | 
152
| ohos.intl | resolvedOptions(): NumberOptions | Obtains attributes of the **NumberFormat** object. | 
H
HelloCrease 已提交
153 154 155 156


### How to Develop

S
shawn_he 已提交
157 158
1. Instantiate a **NumberFormat** object.

159
   Use the default constructor of **NumberFormat** to obtain the system default locale by accessing the system language and region settings, and set it as the locale in the **NumberFormat** object.
H
HelloCrease 已提交
160 161

   
S
shawn_he 已提交
162
   ```js
H
HelloCrease 已提交
163 164 165
   var numberFormat = new intl.NumberFormat();
   ```

166
   Alternatively, use your own locale and formatting parameters to create a **NumberFormat** object. Formatting parameters are optional. For a full list of formatting parameters, see [NumberOptions](../reference/apis/js-apis-intl.md).
H
HelloCrease 已提交
167
   
S
shawn_he 已提交
168
   ```js
H
HelloCrease 已提交
169 170 171 172
   var options = {compactDisplay: "short", notation: "compact"};
   var numberFormat = new intl.NumberFormat("zh-CN", options);
   ```

S
shawn_he 已提交
173 174
2. Format a number.

175
   Call the **format** method to format a number. A string is returned as the formatting result.
G
ge-yafang 已提交
176
   
S
shawn_he 已提交
177
   ```js
H
HelloCrease 已提交
178 179 180 181
   var number = 1234.5678
   var formatResult = numberFormat.format(number);
   ```

S
shawn_he 已提交
182 183
3. Obtain attributes of the **NumberFormat** object.

184
   Call the **resolvedOptions** method to obtain attributes of the **NumberFormat** object. This method will return an array that contains all attributes and values of the object.
G
ge-yafang 已提交
185
   
S
shawn_he 已提交
186
   ```js
H
HelloCrease 已提交
187 188 189 190
   var options = numberFormat.resolvedOptions();
   ```


191
## Sorting Strings
H
HelloCrease 已提交
192

193
Use [Collator](../reference/apis/js-apis-intl.md) APIs to sort strings based on a specific locale. Users in different regions have different preferences for string sorting.
H
HelloCrease 已提交
194 195 196 197


### Available APIs

198
| Module | API | Description | 
H
HelloCrease 已提交
199 200 201 202
| -------- | -------- | -------- |
| ohos.intl | constructor()<sup>8+</sup> | Creates a **Collator** object. | 
| ohos.intl | constructor(locale: string \| Array&lt;string&gt;, options?: CollatorOptions)<sup>8+</sup> | Creates a **Collator** object and sets the locale and other related attributes. | 
| ohos.intl | compare(first: string, second: string): number<sup>8+</sup> | Calculates the comparison result of two strings based on the locale and other attributes of the **Collator** object. | 
203
| ohos.intl | resolvedOptions(): CollatorOptions<sup>8+</sup> | Obtains attributes of the **Collator** object. | 
H
HelloCrease 已提交
204 205 206 207


### How to Develop

S
shawn_he 已提交
208 209
1. Instantiate a **Collator** object.

210
   Use the default constructor of **Collator** to obtain the system default locale by accessing the system language and region settings, and set it as the locale in the **Collator** object.
H
HelloCrease 已提交
211 212

   
S
shawn_he 已提交
213
   ```js
H
HelloCrease 已提交
214 215 216
   var collator = new intl.Collator();
   ```

217
   Alternatively, use your own locale and formatting parameters to create a **Collator** object. For a full list of parameters, see [CollatorOptions](../reference/apis/js-apis-intl.md).
H
HelloCrease 已提交
218
   
S
shawn_he 已提交
219
   ```js
H
HelloCrease 已提交
220 221 222
   var collator= new intl.Collator("zh-CN", {localeMatcher: "best fit", usage: "sort"};
   ```

S
shawn_he 已提交
223 224
2. Compare two strings.

225
   Call the **compare** method to compare two input strings. This method returns a value as the comparison result. The return value **-1** indicates that the first string is shorter than the second string, the return value **1** indicates that the first string is longer than the second string, and the return value **0** indicates that the two strings are of equal lengths.
G
ge-yafang 已提交
226
   
S
shawn_he 已提交
227
   ```js
H
HelloCrease 已提交
228 229 230 231 232
   var str1 = "first string";
   var str2 = "second string";
   var compareResult = collator.compare(str1, str2);
   ```

S
shawn_he 已提交
233 234
3. Obtain attributes of the **Collator** object.

235
   Call the **resolvedOptions** method to obtain attributes of the **Collator** object. This method will return an array that contains all attributes and values of the object.
G
ge-yafang 已提交
236
   
S
shawn_he 已提交
237
   ```js
H
HelloCrease 已提交
238 239 240 241 242 243
   var options = collator.resolvedOptions();
   ```


## Determining the Singular-Plural Type

244
Use [PluralRules](../reference/apis/js-apis-intl.md) APIs to determine the singular-plural type for a specific locale. According to the grammar of certain languages, the singular or plural form of a noun depends on its preceding number.
H
HelloCrease 已提交
245 246 247 248


### Available APIs

249
| Module | API | Description | 
H
HelloCrease 已提交
250 251 252 253 254 255 256 257
| -------- | -------- | -------- |
| ohos.intl | constructor()<sup>8+</sup> | Creates a **PluralRules** object. | 
| ohos.intl | constructor(locale: string \| Array&lt;string&gt;, options?: PluralRulesOptions)<sup>8+</sup> | Creates a **PluralRules** object and sets the locale and other related attributes. | 
| ohos.intl | select(n: number): string<sup>8+</sup> | Determines the singular-plural type based on the locale and other formatting-related attributes of the **PluralRules** object. | 


### How to Develop

S
shawn_he 已提交
258 259
1. Instantiate a **PluralRules** object.

260
   Use the default constructor of **PluralRules** to obtain the system default locale by accessing the system language and region settings, and set it as the locale in the **PluralRules** object.
H
HelloCrease 已提交
261 262

   
S
shawn_he 已提交
263
   ```js
H
HelloCrease 已提交
264 265 266
   var pluralRules = new intl.PluralRules();
   ```

267
   Alternatively, use your own locale and formatting parameters to create a **PluralRules** object. For a full list of parameters, see [PluralRulesOptions](../reference/apis/js-apis-intl.md).
H
HelloCrease 已提交
268
   
S
shawn_he 已提交
269
   ```js
H
HelloCrease 已提交
270 271 272
   var plurals = new intl.PluralRules("zh-CN", {localeMatcher: "best fit", type: "cardinal"};
   ```

S
shawn_he 已提交
273 274
2. Determine the singular-plural type.

275
   Call the **select** method to determine the singular-plural type of an input number. This method will return a string representing the singular-plural type, which can be any of the following: **zero**, **one**, **two**, **few**, **many**, and **other**.
G
ge-yafang 已提交
276
   
S
shawn_he 已提交
277
   ```js
H
HelloCrease 已提交
278 279 280 281 282
   var number = 1234.5678
   var categoryResult = plurals.select(number);
   ```


283
## Formatting the Relative Time
H
HelloCrease 已提交
284

285
Use [RelativeTimeFormat](../reference/apis/js-apis-intl.md) APIs to format the relative time for a specific locale.
H
HelloCrease 已提交
286 287 288 289


### Available APIs

290
| Module | API | Description | 
H
HelloCrease 已提交
291 292 293 294 295
| -------- | -------- | -------- |
| ohos.intl | constructor()<sup>8+</sup> | Creates a **RelativeTimeFormat** object. | 
| ohos.intl | constructor(locale: string \| Array&lt;string&gt;, options?: RelativeTimeFormatInputOptions)<sup>8+</sup> | Creates a **RelativeTimeFormat** object and sets the locale and other formatting-related attributes. | 
| ohos.intl | format(value: number, unit: string): string<sup>8+</sup> | Calculates the relative time format based on the locale and other formatting-related attributes of the **RelativeTimeFormat** object. | 
| ohos.intl | formatToParts(value: number, unit: string): Array&lt;object&gt;<sup>8+</sup> | Returns each part of the relative time format based on the locale and other formatting-related attributes of the **RelativeTimeFormat** object. | 
296
| ohos.intl | resolvedOptions(): RelativeTimeFormatResolvedOptions<sup>8+</sup> | Obtains attributes of the **RelativeTimeFormat** object. | 
H
HelloCrease 已提交
297 298 299 300


### How to Develop

S
shawn_he 已提交
301 302
1. Instantiate a **RelativeTimeFormat** object.

303
   Use the default constructor of **RelativeTimeFormat** to obtain the system default locale by accessing the system language and region settings, and set it as the locale in the **RelativeTimeFormat** object.
H
HelloCrease 已提交
304 305

   
S
shawn_he 已提交
306
   ```js
H
HelloCrease 已提交
307 308 309
   var relativeTimeFormat = new intl.RelativeTimeFormat();
   ```

310
   Alternatively, use your own locale and formatting parameters to create a **RelativeTimeFormat** object. Formatting parameters are optional. For a full list of formatting parameters, see [ RelativeTimeFormatInputOptions](../reference/apis/js-apis-intl.md).
H
HelloCrease 已提交
311
   
S
shawn_he 已提交
312
   ```js
S
shawn_he 已提交
313
   var relativeTimeFormat = new intl.RelativeTimeFormat("zh-CN", {numeric: "always", style: "long"});
H
HelloCrease 已提交
314 315
   ```

S
shawn_he 已提交
316 317
2. Format the relative time.

318
   Call the **format** method to format the relative time. This method receives a numeric value representing the time length and a string-form unit, like **year**, **quarter**, **month**, **week**, **day**, **hour**, **minute**, and **second**. This method returns a string representing the formatting result.
G
ge-yafang 已提交
319
   
S
shawn_he 已提交
320
   ```js
H
HelloCrease 已提交
321 322 323 324 325
   var number = 2;
   var unit = "year"
   var formatResult = relativeTimeFormat.format(number, unit);
   ```

S
shawn_he 已提交
326 327
3. Obtain each part of the relative time format.

328
   Upon obtaining each part of the relative time format, customize the relative time formatting result.
G
ge-yafang 已提交
329
   
S
shawn_he 已提交
330
   ```js
H
HelloCrease 已提交
331 332 333 334 335
   var number = 2;
   var unit = "year"
   var formatResult = relativeTimeFormat.formatToParts(number, unit);
   ```

S
shawn_he 已提交
336 337
4. Obtain attributes of the **RelativeTimeFormat** object.

338
   Call the **resolvedOptions** method to obtain attributes of the **RelativeTimeFormat** object. This method will return an array that contains all attributes and values of the object. For a full list of attributes, see [ RelativeTimeFormatResolvedOptions](../reference/apis/js-apis-intl.md).
G
ge-yafang 已提交
339
   
S
shawn_he 已提交
340
   ```js
H
HelloCrease 已提交
341 342
   var options = numberFormat.resolvedOptions();
   ```