> For the complete documentation index, see [llms.txt](https://docs.elentra.org/ejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.elentra.org/ejs/1.1/guide/escl.md).

# ESCL

## Introduction

The **EJS String Composition Language** provides a powerful, flexible, and platform agnostic method for composing complex strings and translations. From simple string definitions to complex clauses comprised of custom variables, static terms, compound strings, aliases, functions, embedded links, and custom formatting -- ESCL can handle it all.

ESCL is designed for everyone, including developers, translators, copy writers, etc. This empowers non-developers to work effectively without any programming background.

## Concepts

Working with ESCL is a breeze once you understand a few key concepts.

### Strings

The most basic element supported by ESCL is a plain string.  In this example, the `hello_message` identifier represents the string `Hello, World!`.

This string requires no processing or formatting and will be returned verbatim.

{% hint style="info" %}

#### Naming Convention

String identifiers must be lower case, alphanumeric, begin with a letter, and may include underscores.
{% endhint %}

```javascript
hello_message: 'Hello, World!'
```

### Clauses

A **clause** in ESCL represents a dynamic part of a string that will be processed.  You represent a clause in a string using brace brackets.

```javascript
my_string: 'This string contains a clause { ... }'
```

### Compound strings

A **compound string** is a string that is constructed by combining one or more strings.  Using a clause, we can pass in the identifier of another string to insert it in place.

{% hint style="info" %}
Each string is processed independently before being combined.
{% endhint %}

In this example, `tos_message` will become `Please accept our Terms of Service` in English and  `Veuillez accepter nos conditions d'utilisation` in French.

{% code title="en-US.js" %}

```javascript
tos_name: 'Terms of Service',
tos_message: 'Please accept our { tos_name }'
```

{% endcode %}

{% code title="fr-CA.js" %}

```javascript
tos_name: 'conditions d\'utilisation',
tos_message: 'Veuillez accepter nos { tos_name }'
```

{% endcode %}

### Variables

A **variable** is a part of a string that will be replaced by values provided by the application.  Values may be passed using the [$translate](/ejs/1.1/guide/modules/components.md#usdtranslate-string-stringid-object-args-string) instance method or the [v-i18n directive](/ejs/1.1/guide/plugins/v-i18n-directive.md).

In this example, the application is expected to provide values for the `firstName` and `lastName` variables.

{% hint style="info" %}

#### Naming Convention

Variable names must be camel-cased, alphanumeric, and begin with a letter.  The colon character (`:`) indicates the beginning of a variable in the clause definition, but must not be included when passing the argument values.
{% endhint %}

```javascript
welcome_message: 'Hello, { :firstName :lastName }, and welcome!'
```

```javascript
this.$translate('welcome_message', { firstName: 'John', lastName: 'Doe' });
// Hello, John Doe, and welcome!
```

```markup
<div v-i18n="{ firstName: 'John', lastName: 'Doe' }">welcome_message</div>
<!-- <div>Hello, John Doe, and welcome!</div> -->
```

### Aliases

An **alias** is a string that contains a single clause which references another string without any additions or modifications.

```javascript
hello_message: 'Hello, World!',
hi_message: '{ hello_message }'
```