JavaScript is a browser tool to add dynamics to your content. Content is what your server returns and it is up to you to decide how you are going to store that data.

Models

The most of the data you will store in the database including translations for your models.

Interface

UI texts can be stored in simple files, however, they are stored often in DB as well.

Passing data to JavaScript

Yes, sometimes you need to handle translation using a JavaScript. For example, to change the label of the button when user clicks on it. In most cases what you will do is just an AJAX request and server will return what you need.

friendBtn.addEventListener('click', () => {
   fetch(`/ajax/users/send-friend-request/${friendBtn.dataset.id}`)
   .then(response => {
     return response.json();
   })
   .then(data => {
     if (data.status = 'ok') {
       // data.data.requestSent contains "Friend request peding" in current locale
       friendBtn.textContent = data.data.requestSent;
     }
     // ...
   });
});

The general case how to pass data from server to JavaScript is to generate a global variable on the server. Below is example for PHP (I prefix all data in superglobal Server like Server.user, Server.lang, Server.settings, Server.env, whatever):

// global template

<script>
  var Server = {};
  var Server.lang = {};
</script>

// page where you need translated data

<script>
  // trans() function returns data from certain file in current app locale
  <?php foreach (trans('users') as $key => $val) : ?>
    Server.lang.<?php echo $key; ?> = '<?php echo $val; ?>';
  <?php endforeach; ?>
</script>

// P.S. you may also use json_encode() or escape $val to prevent XSS

I use SHPS: I store my i18n in a normalized DB, then I use a toolset and pass the request headers (done automatically in template scripts, see example below) plus the group/string identifier to receive the string I need in the target language. I could also retrieve all strings in the target language as a group and send that group to the client (for dynamic content). It's really that easy for me. I usually do the latter via AJAX or websockets and cache the strings in the browser for reduced traffic.

The advantage of storing stuff in a DB like that is that it is sorted, relational and can be sent away as CSV file for translation to a third party. The translation can then be inserted into the DB just as easy. There are tons of office programs for manipulating CSV files (for instance Calc and Excel) and many DBs are able to export/import CSV files directly.

const d = require('promise-defer')();

lang.getString('my-group', 'string-id').then(str => {
    d.resolve(`The string in your language: ${str}!`);
}, d.reject);

d.promise; // the result of this line is returned from the template script; SHPS handles all errors

there is a gettext plugin where you actually just send the translation files as js files :) basically generating a multidimensional hashmap.

-> en.js

reduces the payload but we could argue about a catalogue based page and based on your system you need to build your own parser to generate those file. actually I'm doing that atm to unify my *.volt, *.php, *.js files

but I want to be unified because I only wanna maintain 1 catalogue there are newer approaches esp. for JS.

so i18n still is alive :) in short