Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

A convenient way to translate strings in JavaScript code

See original GitHub issue

Svelte-i18n formatting gives a store that reproduce a function that translate a given word, meaning: _: () => store and the store has value of a function: (message) => translation

This is fine, and on Svelte files the syntax $_(messsage) works great, first the syntax ($_) tells Svelte to subscribe to the store value, and the invocation with the parameter (message) gets the translated string.

However, if you can’t use the convenient syntax $_(message) in a javascript/typescript file you use with your svelte project, since $_ isn’t defined symbol of JS. In order to be able to use this syntax, I had to write the following utility code, which I suggest this project to adapt to make life easier for people:

import { derived } from 'svelte/store';
import { format } from 'svelte-i18n';

function $_(messsage: string) {
    return derived(format, ($format) => $format(messsage));

This function returns (as I believe it should) a store that represents the translated value of the message.

This allow up for example to call in JavaScript/TypeScript code some custom_alert($_('important-warning-message')), while custom_alert is a function takes a store for a string and display it to the user as an alert. This alert should update the translation of the message if the locale has been changed.

Do you agree? Do you believe we should have another convention?

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

vincenzoracocommented, Jan 2, 2022

This issue has been addressed here

However, I can agree that it is not the nicest thing to write. I got it working creating the following function:

import { get } from 'svelte/store'
import { dictionary } from 'svelte-i18n'

const translate = key => {
    if (!user_language || !get( dictionary )[ user_language ]) {
	return key
    return get( dictionary )[ user_language ][ key ]
sebastianrothecommented, Jan 24, 2022

Thank! Good to know. I solved it with my a store and loading the message in the component.

Read more comments on GitHub >

github_iconTop Results From Across the Web

5 Ways to Convert a Value to String in JavaScript
Let's check out the different ways of converting a value to a string in JavaScript. The preferred way from Airbnb's style guide is...
Read more >
How to Convert a String to a Number in JavaScript
Another way to convert a string into a number is to use the parseInt() function. This function takes in a string and an...
Read more >
How to translate strings in JS - Stack Overflow
Using a language with GetText support (in my case PHP) I translate all the strings and output JavaScript file. For example a locale...
Read more >
The Ultimate Guide to JavaScript Localization | Phrase
Kick-start your JavaScript localization and use different i18n JavaScript code examples to make your app ready for international users.
Read more >
Useful string methods - Learn web development | MDN
You can extract a substring from a string using the slice() method. You pass it: the index at which to start extracting; the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found