Pour un souci de lisibilité, ne vous est-il pas déjà arrivé de vouloir écrire des chaines de caractères sur plusieurs lignes dans du code JavaScript ?

Imaginons le code suivant :

$("#myhook").before('<div class="alert alert-danger" role="alert">La suppression de votre compte est irréversible.</div>');

Nous aimerions plutôt l’écrire de cette façon :

$("#myhook").before('
	<div class="alert alert-danger" role="alert">
		La suppression de votre compte est irréversible.
	</div>
');

Or ce code ne fonctionne pas.

Il est possible d’échapper les fins de lignes pour que celà fonctionne :

$("#myhook").before('\
	<div class="alert alert-danger" role="alert">\
		La suppression de votre compte est irréversible.\
	</div>\
');

Cependant, en lisant le guide de style de codage en JavaScript de Google, on y apprendre que les espaces en début de ligne ou après l’échappement peuvent provoquer des erreurs. De plus, cette notation n’est pas supportée dans tous les moteurs JS et elle ne fait pas partie d’ECMAScript.

Google préconise donc cette écriture :

$("#myhook").before('' +
	'<div class="alert alert-danger" role="alert">' +
		'La suppression de votre compte est irréversible.' +
	'</div>' +
'');

J’ai un peu exagéré le trait mais cette solution ne me convient pas d’un point de vue lisibilité. Heureusement pour nous, ES6 vient à notre aide avec le backstick !

$("#myhook").before(`
	<div class="alert alert-danger" role="alert">
		La suppression de votre compte est irréversible.
	</div>
`);

Ce code ressemble exactement au code souhaité au départ et il est fonctionnel !

Si vous souhaitez en apprendre plus sur les gabarits des chaines de caractères avec ES6 (interpolations ou étiquettes par exemple), n’hésitez pas à lire la documentation de Mozilla sur ce sujet.