1# Sorting by Local Habits 2 3## Use Cases 4 5The sorting function allows list content, for example, the language list in **Settings**, to be sorted and displayed in line with local user habits. 6 7## How to Develop 8 9You can implement the sorting function by using the [compare](../reference/apis-localization-kit/js-apis-intl.md#compare8) API of the [Collator](../reference/apis-localization-kit/js-apis-intl.md#collator8) class. The development procedure is as follows: 10 111. Import the **intl** module. 12 ```ts 13 import { intl } from '@kit.LocalizationKit'; 14 ``` 15 162. Create a **Collator** object. 17 You can use **CollatorOptions** to set different sorting formats. For details, see Table 1. 18 ```ts 19 let collator: intl.Collator = new intl.Collator(locale: string | Array<string>, options?: CollatorOptions); 20 ``` 21 223. Compare two strings. 23 ```ts 24 let compareResult: number = collator.compare(first: string, second: string); 25 // If compareResult is a negative number, the first parameter is placed before the second parameter. 26 // If compareResult is 0, the first and second parameters are not sorted in sequence. 27 // If compareResult is a positive number, the first parameter is placed after the second parameter. 28 ``` 29 30**Sorting Format Options** 31 32**Table 1** Supported sorting formats and display effects 33 34| Name| Value| Description| Display Effect| 35| -------- | -------- | -------- | -------- | 36| localeMatcher | lookup | Fuzzy matching.| | 37| | best fit | Exact matching.| | 38| usage | sort | Sorting.| | 39| | search | Search for matched strings.| | 40| sensitivity | base | Compare different letters.| 'a' ≠ 'b', 'a' = 'á', 'a' = 'A' | 41| | accent | Compare different letters or accents of the same letters.| 'a' ≠ 'b', 'a' ≠ 'á', 'a' = 'A' | 42| | case | Compare the capitalization of different letters or the same letters.| 'a' ≠ 'b', 'a' = 'á', 'a' ≠ 'A' | 43| | variant | Compare different letters or accents, and other distinctive signs or capitalization.| 'a' ≠ 'b', 'a' ≠ 'á', 'a' ≠ 'A' | 44| ignorePunctuation | true | Ignore punctuation.| 'a,b' = 'ab' | 45| | false | Not ignore punctuation.| 'a,b' < 'ab' | 46| numeric | true | Sort by number.| '1' < '2' < '10' < '11' | 47| | false | Not sort by number.| '1' < '10' < '11' < '2' | 48| caseFirst | upper | Place uppercase letters in the front.| 'AB' < 'Ab' < 'aB' < 'ab' | 49| | lower | Place lowercase letters in the front.| 'ab' < 'aB' < 'Ab' < 'AB' | 50| | false | Not distinguish first letter capitalization.| 'ab' < 'aB' < 'Ab' < 'AB' | 51| collation | big5han | Pinyin sorting for Latin letters.| | 52| | compat | Compatibility sorting, only for Arabic.| | 53| | dict | Dictionary-style sorting, only for Singhalese.| | 54| | direct | Binary code sorting.| | 55| | ducet | Default Unicode collation element table.| | 56| | eor | European sorting.| | 57| | gb2312 | Pinyin sorting, only for Chinese.| | 58| | phonebk | Phonebook-style sorting.| | 59| | phonetic | Phonetic sorting.| | 60| | pinyin | Pinyin sorting.| | 61| | reformed | Reformed sorting, only for Swedish.| | 62| | searchjl | Special collation type for Korean initial consonant search.| | 63| | stroke | Stroke sorting for Chinese.| | 64| | trad | Traditional-style sorting, for example, Spanish.| | 65| | unihan | Radical-stroke sorting for Han characters, only for Chinese, Japanese, and Korean.| | 66| | zhuyin | Zhuyin sorting, only for Chinese.| | 67 68**Development Example** 69 70```ts 71// Import the i18n module. 72import { intl } from '@kit.LocalizationKit'; 73 74// Create a Collator object. 75let options: intl.CollatorOptions = { 76 localeMatcher: 'lookup', 77 usage: 'sort', 78 sensitivity: 'case' // Case sensitive 79}; 80let collator: intl.Collator = new intl.Collator('zh-CN', options); 81 82// Case-sensitive sorting 83let array: Array<string> = ['app', 'App', 'Apple', 'ANIMAL', 'animal', 'apple', 'APPLE']; 84array.sort((a, b) => { // After sorting: array = ['animal', 'ANIMAL', 'app', 'App', 'apple', 'Apple', 'APPLE'] 85 return collator.compare(a, b); 86}) 87 88// Pinyin sorting for Chinese 89array = ['Pingguo', 'Li', 'Xiangjiao', 'Shiliu', 'Ganzhe', 'Putao', 'Juzi']; 90array.sort((a, b) => { // After sorting: array = ['Ganzhe', 'Juzi', 'Li', 'Pingguo', 'Putao', 'Shiliu', 'Xiangjiao'] 91 return collator.compare(a, b); 92}) 93 94// Stroke sorting 95options = { 96 localeMatcher: 'lookup', 97 usage: 'sort', 98 collation: 'stroke' 99}; 100let strokeCollator: intl.Collator = new intl.Collator('zh-CN', options); 101array = ['Pingguo', 'Li', 'Xiangjiao', 'Shiliu', 'Ganzhe', 'Putao', 'Juzi']; 102array.sort((a, b) => { // After sorting: array = ['Ganzhe', 'Shiliu', 'Pingguo', 'Xiangjiao', 'Li', 'Putao', 'Juzi'] 103 return strokeCollator.compare(a, b); 104}) 105 106// Search for the matched string. 107options = { 108 usage: 'search', 109 sensitivity: 'base' 110}; 111let searchCollator: intl.Collator = new intl.Collator('tr', options); 112array = ['Türkiye', 'TüRkiye', 'salt', 'bright']; 113let target: string = 'türkiye'; 114// matches = ['Türkiye', 'TüRkiye'] 115let matches: string[] = array.filter(item => searchCollator.compare(item, target) === 0); 116``` 117