How to handle translation for texts inside a .js of a WP theme

Question

I have a wordpress application and usually I use the PHP function <?php _e('foo', 'bar') ?> when I need to echo something that needs to be translated. But, right now I am implementing a new feature and in my .js file I have something like

var confirmation = confirm("Are you sure you want to quit");  if(confirmation){  ...  } 

The problem with the above code is that I can't use the PHP function _e() to translate it since this a JS script.

Is there anyway to enable translation for texts echoed in JS?

After BOUNTY

I am putting a bounty since the questions given are generic whereas I am searching for a solution that can solve my issue.

I am working on WP project that was built by someone before. I am supposed to only add a translation to codes that exist in js file called functions.js path: C:\Users\meskerem\foo.com\wp-content\themes\foo\assets\scripts\functions.js let's assume the following code exists inside the function.

var confirmation = confirm("Are you sure you want to quit");  if(confirmation){  ...  } 

Now the objective is make that English sentence translatable. The above js code is executed when a button inside this file is clicked. C:\Users\meskerem\foo.com\wp-content\plugins\wp-jobhunt\templates\dashboards\candidate\templates_ajax_functions.php

The html code that triggers the translation is as simple as:

<h1> <?= _e('good morning', 'jobhunt') ?> </h1> <div> <i class='icon-trash' onclick="askConfirmation()"> x </i> </div> 

So, the script is simple but translating is where I have some issues.

Answer 1

In word press you have to pass translation array to respective java script.

for example,

if you are en queue script like below from function.php file,

wp_enqueue_script( $handle, $src, $deps,$ver,$in_footer ); 

you have to add translation from function file to perticular js by use his handle inside wp_localize_script();

  e.g. wp_enqueue_script( 'your-handle', $src, $deps,$ver,$in_footer );    $translation_array = array('messagekey' => __('Are you sure you want to quit', foo');                             );   wp_localize_script('your-handle', 'langvars', $translation_array); 

In your case

wp_enqueue_script( 'cs_functions_js', plugins_url('/assets/scripts/functions.js', __FILE__ ), '', '', true );  just add below code after above code.  $translation_array = array('messagekey' => __('Are you sure you want to quit', foo');                                );   wp_localize_script('cs_functions_js', 'langvars', $translation_array); 

Then you can access translation in js like,

var confirmboxmessage = langvars.messagekey; var confirmation = confirm(langvars.messagekey);