intl-guidelines.md 15.9 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

6
> **NOTE**<br>
7 8
> In the code snippets in this document, **intl** refers to the name of the imported module.

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

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


### Available APIs

16
| Module | API | Description | 
H
HelloCrease 已提交
17 18 19 20 21 22 23 24 25 26
| -------- | -------- | -------- |
| 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

27
1. Instantiate a **Locale** object.<br>
28
   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 已提交
29

S
shawn_he 已提交
30 31 32 33 34 35 36 37 38 39 40 41 42 43
   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 已提交
44 45 46 47 48 49 50
   
   ```
   var locale = "zh-CN";
   var options = {caseFirst: false, calendar: "chinese", collation: pinyin};
   var localeObj = new intl.Locale(locale, options);
   ```

51
2. Obtain the string representing a **Locale** object.<br>
52
   Call the **toString** method to obtain the string representing a **Locale** object, which includes the language, region, and other options.
H
HelloCrease 已提交
53 54 55 56 57
     
   ```
   var localeStr = localeObj.toString();
   ```

58 59
3. Maximize locale information.<br>
   Call the **maximize** method to maximize locale information; that is, supplement the missing script and region information.
H
HelloCrease 已提交
60 61 62 63 64
     
   ```
   var maximizedLocale = localeObj.maximize();
   ```

65 66
4. Minimize locale information.<br>
   Call the **minimize** method to minimize locale information; that is, delete the unnecessary script and region information.
H
HelloCrease 已提交
67 68 69 70 71 72 73 74
     
   ```
   var minimizedLocale = localeObj.minimize();
   ```


## Formatting the Date and Time

75
Use [DateTimeFormat](../reference/apis/js-apis-intl.md) APIs to format the date and time for a specific locale.
H
HelloCrease 已提交
76 77 78 79


### Available APIs

80
| Module | API | Description | 
H
HelloCrease 已提交
81 82 83 84 85 86 87 88 89 90
| -------- | -------- | -------- |
| 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

91
1. Instantiate a **DateTimeFormat** object.<br>
92
   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 已提交
93 94 95 96 97 98

   
   ```
   var dateTimeFormat = new intl.DateTimeFormat();
   ```

99
   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 已提交
100 101 102 103 104 105
   
   ```
   var options = {dateStyle: "full", timeStyle: "full"};
   var dateTimeFormat = new intl.DateTimeFormat("zh-CN", options);
   ```

106
2. Format the date and time.<br>
107
   Call the **format** method to format the date and time in the **DateTimeFormat** object. This method returns a string representing the formatting result.
H
HelloCrease 已提交
108 109 110 111 112 113
     
   ```
   Date date = new Date();
   var formatResult = dateTimeFormat.format(date);
   ```

114
3. Format a period.<br>
115
   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.
H
HelloCrease 已提交
116 117 118 119 120 121 122
     
   ```
   Date startDate = new Date();
   Date endDate = new Date();
   var formatResult = dateTimeFormat.formatRange(startDate, endDate);
   ```

123
4. Obtain attributes of the **DateTimeFormat** object.<br>
124
   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.
H
HelloCrease 已提交
125 126 127 128 129 130
     
   ```
   var options = dateTimeFormat.resolvedOptions();
   ```


131
## Formatting Numbers
H
HelloCrease 已提交
132

133
Use [NumberFormat](../reference/apis/js-apis-intl.md) APIs to format numbers for a specific locale.
H
HelloCrease 已提交
134 135 136 137


### Available APIs

138
| Module | API | Description | 
H
HelloCrease 已提交
139 140 141 142
| -------- | -------- | -------- |
| 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. | 
143
| ohos.intl | resolvedOptions(): NumberOptions | Obtains attributes of the **NumberFormat** object. | 
H
HelloCrease 已提交
144 145 146 147


### How to Develop

148
1. Instantiate a **NumberFormat** object.<br>
149
   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 已提交
150 151 152 153 154 155

   
   ```
   var numberFormat = new intl.NumberFormat();
   ```

156
   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 已提交
157 158 159 160 161 162
   
   ```
   var options = {compactDisplay: "short", notation: "compact"};
   var numberFormat = new intl.NumberFormat("zh-CN", options);
   ```

163
2. Format a number.<br>
164
   Call the **format** method to format a number. A string is returned as the formatting result.
H
HelloCrease 已提交
165 166 167 168 169 170
     
   ```
   var number = 1234.5678
   var formatResult = numberFormat.format(number);
   ```

171
3. Obtain attributes of the **NumberFormat** object.<br>
172
   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.
H
HelloCrease 已提交
173 174 175 176 177 178
     
   ```
   var options = numberFormat.resolvedOptions();
   ```


179
## Sorting Strings
H
HelloCrease 已提交
180

181
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 已提交
182 183 184 185


### Available APIs

186
| Module | API | Description | 
H
HelloCrease 已提交
187 188 189 190
| -------- | -------- | -------- |
| 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. | 
191
| ohos.intl | resolvedOptions(): CollatorOptions<sup>8+</sup> | Obtains attributes of the **Collator** object. | 
H
HelloCrease 已提交
192 193 194 195


### How to Develop

196
1. Instantiate a **Collator** object.<br>
197
   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 已提交
198 199 200 201 202 203

   
   ```
   var collator = new intl.Collator();
   ```

204
   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 已提交
205 206 207 208 209
   
   ```
   var collator= new intl.Collator("zh-CN", {localeMatcher: "best fit", usage: "sort"};
   ```

210
2. Compare two strings.<br>
211
   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.
H
HelloCrease 已提交
212 213 214 215 216 217 218
     
   ```
   var str1 = "first string";
   var str2 = "second string";
   var compareResult = collator.compare(str1, str2);
   ```

219
3. Obtain attributes of the **Collator** object.<br>
220
   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.
H
HelloCrease 已提交
221 222 223 224 225 226 227 228
     
   ```
   var options = collator.resolvedOptions();
   ```


## Determining the Singular-Plural Type

229
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 已提交
230 231 232 233


### Available APIs

234
| Module | API | Description | 
H
HelloCrease 已提交
235 236 237 238 239 240 241 242
| -------- | -------- | -------- |
| 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

243
1. Instantiate a **PluralRules** object.<br>
244
   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 已提交
245 246 247 248 249 250

   
   ```
   var pluralRules = new intl.PluralRules();
   ```

251
   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 已提交
252 253 254 255 256
   
   ```
   var plurals = new intl.PluralRules("zh-CN", {localeMatcher: "best fit", type: "cardinal"};
   ```

257 258
2. Determine the singular-plural type.<br>
   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**.
H
HelloCrease 已提交
259 260 261 262 263 264 265
     
   ```
   var number = 1234.5678
   var categoryResult = plurals.select(number);
   ```


266
## Formatting the Relative Time
H
HelloCrease 已提交
267

268
Use [RelativeTimeFormat](../reference/apis/js-apis-intl.md) APIs to format the relative time for a specific locale.
H
HelloCrease 已提交
269 270 271 272


### Available APIs

273
| Module | API | Description | 
H
HelloCrease 已提交
274 275 276 277 278
| -------- | -------- | -------- |
| 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. | 
279
| ohos.intl | resolvedOptions(): RelativeTimeFormatResolvedOptions<sup>8+</sup> | Obtains attributes of the **RelativeTimeFormat** object. | 
H
HelloCrease 已提交
280 281 282 283


### How to Develop

284
1. Instantiate a **RelativeTimeFormat** object.<br>
285
   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 已提交
286 287 288 289 290 291

   
   ```
   var relativeTimeFormat = new intl.RelativeTimeFormat();
   ```

292
   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 已提交
293 294 295 296 297
   
   ```
   var relativeTimeFormat = new intl.RelativeTimeFormat("zh-CN", {numeric: "always", style: "long"};
   ```

298
2. Format the relative time.<br>
299
   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.
H
HelloCrease 已提交
300 301 302 303 304 305 306
     
   ```
   var number = 2;
   var unit = "year"
   var formatResult = relativeTimeFormat.format(number, unit);
   ```

307
3. Obtain each part of the relative time format.<br>
308
   Upon obtaining each part of the relative time format, customize the relative time formatting result.
H
HelloCrease 已提交
309 310 311 312 313 314 315
     
   ```
   var number = 2;
   var unit = "year"
   var formatResult = relativeTimeFormat.formatToParts(number, unit);
   ```

316
4. Obtain attributes of the **RelativeTimeFormat** object.<br>
317
   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).
H
HelloCrease 已提交
318 319 320 321
     
   ```
   var options = numberFormat.resolvedOptions();
   ```
S
shawn_he 已提交
322 323 324 325 326

## Samples

The following sample is provided to help you better understand how to develop internationalization capabilities:

327
-[`International`: Internationalization (JS) (API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/International)