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

S
shawn_he 已提交
3
This development guide describes how to use i18n APIs that are defined in ECMA 402.
H
HelloCrease 已提交
4 5 6

## Setting Locale Information

7
Use [Locale](../reference/apis/js-apis-intl.md) APIs to maximize or minimize locale information.
H
HelloCrease 已提交
8 9 10 11


### Available APIs

12
| Module | API | Description | 
H
HelloCrease 已提交
13 14 15 16 17 18 19 20 21 22
| -------- | -------- | -------- |
| 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

23 24
1. Instantiate a **Locale** object.<br>
   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. In the code below, **intl** is the name of the imported module.
H
HelloCrease 已提交
25 26 27 28 29 30 31 32

   
   ```
   var locale = "zh-CN";
   var options = {caseFirst: false, calendar: "chinese", collation: pinyin};
   var localeObj = new intl.Locale(locale, options);
   ```

33
2. Obtain the string representing a **Locale** object.<br>
34
   Call the **toString** method to obtain the string representing a **Locale** object, which includes the language, region, and other options.
H
HelloCrease 已提交
35 36 37 38 39
     
   ```
   var localeStr = localeObj.toString();
   ```

40 41
3. Maximize locale information.<br>
   Call the **maximize** method to maximize locale information; that is, supplement the missing script and region information.
H
HelloCrease 已提交
42 43 44 45 46
     
   ```
   var maximizedLocale = localeObj.maximize();
   ```

47 48
4. Minimize locale information.<br>
   Call the **minimize** method to minimize locale information; that is, delete the unnecessary script and region information.
H
HelloCrease 已提交
49 50 51 52 53 54 55 56
     
   ```
   var minimizedLocale = localeObj.minimize();
   ```


## Formatting the Date and Time

57
Use [DateTimeFormat](../reference/apis/js-apis-intl.md) APIs to format the date and time for a specific locale.
H
HelloCrease 已提交
58 59 60 61


### Available APIs

62
| Module | API | Description | 
H
HelloCrease 已提交
63 64 65 66 67 68 69 70 71 72
| -------- | -------- | -------- |
| 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

73 74
1. Instantiate a **DateTimeFormat** object.<br>
   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. In the code below, **intl** is the name of the imported module.
H
HelloCrease 已提交
75 76 77 78 79 80

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

81
   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 已提交
82 83 84 85 86 87
   
   ```
   var options = {dateStyle: "full", timeStyle: "full"};
   var dateTimeFormat = new intl.DateTimeFormat("zh-CN", options);
   ```

88
2. Format the date and time.<br>
89
   Use the **format** method of **DateTimeFormat** to format a **Date** object. This method returns a string representing the formatting result.
H
HelloCrease 已提交
90 91 92 93 94 95
     
   ```
   Date date = new Date();
   var formatResult = dateTimeFormat.format(date);
   ```

96
3. Format a period.<br>
97
   Use the **formatRange** method of **DateTimeFormat** to format a period. 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 已提交
98 99 100 101 102 103 104
     
   ```
   Date startDate = new Date();
   Date endDate = new Date();
   var formatResult = dateTimeFormat.formatRange(startDate, endDate);
   ```

105 106
4. Obtain attributes of the **DateTimeFormat** object.<br>
   The **resolvedOptions** method of **DateTimeFormat** returns an object that contains all related attributes and values of the **DateTimeFormat** object.
H
HelloCrease 已提交
107 108 109 110 111 112 113 114
     
   ```
   var options = dateTimeFormat.resolvedOptions();
   ```


## Number Formatting

115
Use [NumberFormat](../reference/apis/js-apis-intl.md) APIs to format a number for a specific locale.
H
HelloCrease 已提交
116 117 118 119


### Available APIs

120
| Module | API | Description | 
H
HelloCrease 已提交
121 122 123 124 125 126 127 128 129
| -------- | -------- | -------- |
| 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. | 
| ohos.intl | resolvedOptions(): NumberOptions | Obtains the attributes of the **NumberFormat** object. | 


### How to Develop

130
1. Instantiate a **NumberFormat** object.<br>
131
   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. In the code below, **intl** is the name of the imported module.
H
HelloCrease 已提交
132 133 134 135 136 137

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

138
   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 已提交
139 140 141 142 143 144
   
   ```
   var options = {compactDisplay: "short", notation: "compact"};
   var numberFormat = new intl.NumberFormat("zh-CN", options);
   ```

145 146
2. Format a number.<br>
   Use the **format** method of **NumberFormat** to format a number. A string is returned as the formatting result.
H
HelloCrease 已提交
147 148 149 150 151 152
     
   ```
   var number = 1234.5678
   var formatResult = numberFormat.format(number);
   ```

153 154
3. Access the attributes of the **NumberFormat** object.<br>
   The **resolvedOptions** method of NumberFormat returns an object that contains all related attributes and values of the **NumberFormat** object.
H
HelloCrease 已提交
155 156 157 158 159 160 161 162
     
   ```
   var options = numberFormat.resolvedOptions();
   ```


## String Sorting

163
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 已提交
164 165 166 167


### Available APIs

168
| Module | API | Description | 
H
HelloCrease 已提交
169 170 171 172 173 174 175 176 177
| -------- | -------- | -------- |
| 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. | 
| ohos.intl | resolvedOptions(): CollatorOptions<sup>8+</sup> | Obtains the attributes of the **Collator** object. | 


### How to Develop

178
1. Instantiate a **Collator** object.<br>
179
   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. In the code below, **intl** is the name of the imported module.
H
HelloCrease 已提交
180 181 182 183 184 185

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

186
   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 已提交
187 188 189 190 191
   
   ```
   var collator= new intl.Collator("zh-CN", {localeMatcher: "best fit", usage: "sort"};
   ```

192 193
2. Compare two strings.<br>
   Use the **compare** method of **Collator** 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 已提交
194 195 196 197 198 199 200
     
   ```
   var str1 = "first string";
   var str2 = "second string";
   var compareResult = collator.compare(str1, str2);
   ```

201 202
3. Obtain attributes of the **Collator** object.<br>
   The **resolvedOptions** method of **Collator** returns an object that contains all related attributes and values of the **Collator** object.
H
HelloCrease 已提交
203 204 205 206 207 208 209 210 211 212 213 214 215
     
   ```
   var options = collator.resolvedOptions();
   ```


## Determining the Singular-Plural Type

According to grammars in certain languages, the singular or plural form of a noun depends on the number prior to the noun. [PluralRules](../reference/apis/js-apis-intl.md) APIs are used to determine the singular-plural type for a specific locale.


### Available APIs

216
| Module | API | Description | 
H
HelloCrease 已提交
217 218 219 220 221 222 223 224
| -------- | -------- | -------- |
| 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

225
1. Instantiate a **PluralRules** object.<br>
226
   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. In the code below, **intl** is the name of the imported module.
H
HelloCrease 已提交
227 228 229 230 231 232

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

233
   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 已提交
234 235 236 237 238
   
   ```
   var plurals = new intl.PluralRules("zh-CN", {localeMatcher: "best fit", type: "cardinal"};
   ```

239 240
2. Determine the singular or plural category.<br>
   Use the **select** method of **PluralRules** to determine the singular-plural type for an input number. This method returns a string as the category of the input number, which can be any of the following: **zero**, **one**, **two**, **few**, **many**, and **other**.
H
HelloCrease 已提交
241 242 243 244 245 246 247 248 249
     
   ```
   var number = 1234.5678
   var categoryResult = plurals.select(number);
   ```


## Formatting Relative Time

250
Use [RelativeTimeFormat](../reference/apis/js-apis-intl.md) APIs to format the relative time for a specific locale.
H
HelloCrease 已提交
251 252 253 254


### Available APIs

255
| Module | API | Description | 
H
HelloCrease 已提交
256 257 258 259 260 261 262 263 264 265
| -------- | -------- | -------- |
| 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. | 
| ohos.intl | resolvedOptions(): RelativeTimeFormatResolvedOptions<sup>8+</sup> | Obtains the attributes of the **RelativeTimeFormat** object. | 


### How to Develop

266
1. Instantiate a **RelativeTimeFormat** object.<br>
267
   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. In the code below, **intl** is the name of the imported module.
H
HelloCrease 已提交
268 269 270 271 272 273

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

274
   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 已提交
275 276 277 278 279
   
   ```
   var relativeTimeFormat = new intl.RelativeTimeFormat("zh-CN", {numeric: "always", style: "long"};
   ```

280
2. Format the relative time.<br>
281
   Use the **format** method of **RelativeTimeFormat** 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 已提交
282 283 284 285 286 287 288
     
   ```
   var number = 2;
   var unit = "year"
   var formatResult = relativeTimeFormat.format(number, unit);
   ```

289
3. Obtain each part of the relative time format.<br>
290
   Opon obtaining each part of the relative time format, customize the relative time formatting result.
H
HelloCrease 已提交
291 292 293 294 295 296 297
     
   ```
   var number = 2;
   var unit = "year"
   var formatResult = relativeTimeFormat.formatToParts(number, unit);
   ```

298 299
4. Access the attributes of the **RelativeTimeFormat** object.<br>
   The **resolvedOptions** method of **RelativeTimeFormat** returns an object that contains all related attributes and values of the **RelativeTimeFormat** object. For a full list of attributes, see [ RelativeTimeFormatResolvedOptions](../reference/apis/js-apis-intl.md).
H
HelloCrease 已提交
300 301 302 303
     
   ```
   var options = numberFormat.resolvedOptions();
   ```
S
shawn_he 已提交
304 305 306 307 308

## Samples

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

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