woocommerce/plugins/woocommerce-blocks/docs/translations/translations-in-JS-TS-files.md

# Translations in JS/TS files

In comparison to PHP files, translations in JS/TS files require a few additional steps. To use translation functions in JS/TS, the dependency `@wordpress/i18n` needs to be included at the top of the corresponding file:

```ts
import { sprintf, _n } from '@wordpress/i18n';
```

Once that dependency had been included, the translation function can than be used.

## Usage of localization functions

### `__()`

The function `__()` retrieves the translation of `$text`.

```ts
// Schema
const translation = __( string text, string domain = 'default' );

// Example
import { __ } from '@wordpress/i18n';

const translation = __( 'Place Order', 'woo-gutenberg-products-block' );
```

See also <https://developer.wordpress.org/reference/functions/__/>.

### `_n()`

The function `_n()` translates and retrieves the singular or plural form based on the supplied number.

```ts
// Schema
const translation = _n( string single, string plural, int number, string domain = 'default' );

// Example
import { sprintf, _n } from '@wordpress/i18n';

const translation = sprintf(
    /* translators: %s number of products in cart. */
    _n(
        '%d product',
        '%d products',
        Math.abs( category->count ),
        'woo-gutenberg-products-block'
    ),
    Math.abs( category->count )
);
```

See also <https://developer.wordpress.org/reference/functions/_n/>.

### `_x()`

The function `_x()` retrieves a translated string with gettext context.

```ts
// Schema
const translation = _x( string text, string context, string domain = 'default' );

// Example
import { _x } from '@wordpress/i18n';

const translation = _x( 'Draft', 'Order status', 'woo-gutenberg-products-block' );
```

See also <https://developer.wordpress.org/reference/functions/_x/>.

### `_nx()`

The function `_nx()` translates and retrieves the singular or plural form based on the supplied number, with gettext context.

```ts
// Schema
const translation = _nx( string single, string plural, int number, string context, string domain = 'default' );

// Example
import { sprintf, _nx } from '@wordpress/i18n';

const translation = sprintf(
    /* translators: %s number of products in cart. */
    _nx(
        '%d product',
        '%d products',
        Math.abs( category->count ),
        'Number of products in the cart',
        'woo-gutenberg-products-block'
    ),
    Math.abs( category->count )
);
```

See also <https://developer.wordpress.org/reference/functions/_nx/>.

### Template literals and variables

Template literals cannot be used in JS/TS translations. To use variables in JS/TS translations, the function `sprintf()` needs to be used, as variables cannot be used directly. Various examples on how to use this function, can be seen in the previous examples.

See also <https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/#sprintf>.

<!-- FEEDBACK -->

---

[We're hiring!](https://woocommerce.com/careers/) Come work with us!

🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/testing/README.md)

<!-- /FEEDBACK -->