1# Multi-Language Capability
2
3Applications designed based on the development framework apply to different countries and regions. With the multi-language capability, you do not need to develop application versions in different languages, and your users can switch between various locales. This also facilitates project maintenance.
4
5You only need to perform operations in [Defining Resource Files](#defining-resource-files) and [Referencing Resources](#referencing-resources) to use the multi-language capability of this framework. For details about how to obtain the current system language, see [Obtaining the Language](#obtaining-the-language).
6
7## Defining Resource Files
8
9Resource files store application content in multiple languages. This framework uses JSON files to store resource definitions.
10
11Place the resource definition file of each locale in the **i18n** folder specified in [Directory Structure](js-lite-framework-file.md). Name the resource files in _language-region_.json format. For example, name the resource file for English (United States) **en-US.json**. If there is no resource file of the locale that matches the system language, content in the **en-US.json** file will be used by default.
12
13The format of the resource file content is as follows:
14
15en-US.json
16
17```json
18{
19    "strings": {
20        "hello": "Hello world!",
21        "object": "Object parameter substitution-{name}",
22        "array": "Array type parameter substitution-{0}",
23        "symbol": "@#$%^&*()_+-={}[]\\|:;\"'<>,./?"
24    },
25
26    "files": {
27        "image": "image/en_picture.PNG"
28    }
29}
30```
31
32## Referencing Resources
33
34- Use the **$t** function to reference to resources of different locales. The **$t** function is available for both **.hml** and **.js** files. The system displays content based on a resource file path specified via **$t** and the specified resource file whose locale matches the current system language.
35
36  | Parameter  | Type         | Mandatory| Description                                                        |
37  | ------ | ------------- | ---- | ------------------------------------------------------------ |
38  | path   | string        | Yes  | Resource path.                                                    |
39  | params | Array\|Object | No  | Content used to replace placeholders during runtime. There are two types of placeholders available:<br>- Named placeholder, for example, {name}. The actual content must be of the object type, for example, **$t('strings.object', { name: 'Hello world' })**.<br>- Digit placeholder, for example, **{0}**. The actual content must be of the array type, for example, **$t('strings.array', ['Hello world']**. |
40
41- Example
42
43  ```html
44  <!-- xxx.hml -->
45  <div>
46    <!-- Display Hello world! without using a placeholder. -->
47    <text>{{ $t('strings.hello') }}</text>
48    <!-- Replace named placeholder {name} with Hello world and display it. -->
49    <text>{{ $t('strings.object', { name: 'Hello world' }) }}</text>
50    <!-- Replace digit placeholder {0} with Hello world and display it. -->
51    <text>{{ $t('strings.array', ['Hello world']) }}</text>
52    <!-- Obtain the resource content from the .js file and display Hello world. -->
53    <text>{{ hello }}</text>
54    <!-- Obtain the resource content from the .js file, replace named placeholder {name} with Hello world, and display Substitution in an object: Hello world. -->
55    <text>{{ replaceObject }}</text>
56    <!-- Obtain the resource content from the .js file, replace digit placeholder {0} with Hello world, and display Substitution in an array: Hello world. -->
57    <text>{{ replaceArray }}</text>
58
59    <!-- Display the image in the specified file path. -->
60    <image src="{{ $t('files.image') }}" class="image"></image>
61    <!-- Obtain the image file path from the .js file and display the image. -->
62    <image src="{{ replaceSrc }}" class="image"></image>
63  </div>
64  ```
65
66  ```javascript
67  // xxx.js
68  // The following example uses the $t function in the .js file.
69  export default {
70    data: {
71      hello: '',
72      replaceObject: '',
73      replaceArray: '',
74      replaceSrc: '',
75    },
76    onInit() {
77      this.hello = this.$t('strings.hello');
78      this.replaceObject = this.$t('strings.object', { name: 'Hello world' });
79      this.replaceArray = this.$t('strings.array', ['Hello world']);
80      this.replaceSrc = this.$t('files.image');
81    },
82  }
83  ```
84
85
86
87## Obtaining the Language
88
89For details about how to obtain the language, see [Application Configuration](../js-apis-system-configuration.md).
90