Besoin de clarification

Bonjour à tous
Je suis plongé dans le livre “JavaScript: The Definitive Guide, 7th Edition” et je ne trouve pas d’explication claire sur une fonction utilisée de nombreuses fois dans les exemples.
Il s’agit de la notation ${xxx}
D’après le contexte, je comprends que cela permet d’insérer la valeur de xxx dans une chaîne de caractères. C’est à dire que

let fullName = '${firstName} ${lastName}';

est équivalent à

let fullName = firstName + ' ' + lastName;

Pouvez-vous confirmer cette intuition?

Dans la table des matières c’est sensé être décrit à la page 16, mais je ne trouve rien de tel à cette page.
Modifié par PapyJP (28 Aug 2025 - 12:31)

Salut,

Ton intuition est bonne, mais attention, ta syntaxe est fausse !

Ce n'est pas de simples quotes à indiquer pour un template string, mais des back quotes.

Ce code ne fonctionnera pas. Tu n'obtiendras pas le résultat escompté :

let a = 90,
    b = 60,
    c = 89,
    total = '${a} + ${b} + ${c} = ${a+b+c}'
console.log(total)

Alors que celui ci fonctionnera :

let a = 90,
    b = 60,
    c = 89,
    total = `${a} + ${b} + ${c} = ${a+b+c}`
console.log(total)

Tu remarqueras qu'entre les accolades, tu écris du Js classique.

Le back quote, c'est le signe en bas à droite de la touche 7 de ton clavier (pas le pavé numérique). (AltGr + 7). Sur MacOS, je ne sais plus quelle est la combinaison de touches.

Sur plusieurs lignes :

let bb = {
    poitrine: 90,
    taille: 60,
    hanche: 89
}

let bb_string = `
    Les mensurations de BB : 
        - poitrine : ${bb.poitrine} cm
        - taille : ${bb.taille} cm
        - hanche : ${bb.hanche} cm
`
console.log(bb_string)

Modifié par Niuxe (28 Aug 2025 - 15:05)

il me semble que c'est cela, pour introduire une variable dans une chaîne genre
let nom_complet =`nom : ${lastName} , prénoms ${firstName}`

ce qui s'écrit aussi comme tu le dis en équivalence mais en plus long et compliqué à lire avec les plus, les espaces à ne pas oublier...

PS: comme le signal notre camarade, faut utiliser les back quotes mais j'ai dû m'y reprendre à trois fois pour les intégrer dans ce mini éditeur...
Modifié par Bob (MC Melun) (28 Aug 2025 - 15:00)

Merci de vos réponses.
Pas facile sur un document imprimé de distinguer `de '
En plus sur un clavier français c'est la galère, car ` est un caractère non espaçant, il faut taper un espace après pour le voir.

Dans mon exemple simple je ne crois pas qu'il soit plus facile d'écrire

let fullName = `${firstName} ${lastName}`;

que

let fullName = firstName + ' ' + lastName;

ou

let fullName = [firstName, lastName].join(' ');

Je pense que c'est à utiliser avec parcimonie et à bon escient.

Sous Linux Debian, le ` apparait dès qu'on le tape au clavier (avec Alt GR + 7)

PapyJP a écrit :
Merci de vos réponses.
Pas facile sur un document imprimé de distinguer `de '
En plus sur un clavier français c'est la galère, car ` est un caractère non espaçant, il faut taper un espace après pour le voir.

Dans mon exemple simple je ne crois pas qu'il soit plus facile d'écrire

let fullName = `${firstName} ${lastName}`;

que

let fullName = firstName + ' ' + lastName;

ou

let fullName = [firstName, lastName].join(' ');

Je pense que c'est à utiliser avec parcimonie et à bon escient.

Modifié par Bongota (28 Aug 2025 - 15:59)

PapyJP a écrit :
Je pense que c'est à utiliser avec parcimonie et à bon escient.

Si tu parles de notre cher ami parsimonhi, je ne sais pas s'il sera disponible à chaque fois. Pose-lui la question quand tu devras utiliser les template string.

J'utilise cette syntaxe très souvent. Exemple d'un fichier (je n'écris plus les points virgule. Cela amène du bruit et vitejs le fait à ma place lors de la compilation) :

import TemplateEngine from '../TemplateEngine'
import Subject from '../observer/Subject'
import NavLayerSummaryObserver from './NavLayerSummaryObserver'
import Utils from '../Utils'


export default class LayerSummary{
    #isArticleAvailable
    #articleEl
    #summaryLayerEl
    #subject

    constructor(){
        this.#isArticleAvailable = document.querySelector('article')
        if(this.#isArticleAvailable){
            this.#subject = new Subject()
            this.#articleEl = document.querySelector('article')
            this.#summaryLayerEl = document.getElementById('summary')
        }
    }

    init(){
        if(this.#isArticleAvailable && this.#summaryLayerEl){
            let $nav = this.#summaryLayerEl.querySelector('nav'),
                reference = 130,
                numbers = [...Array(6).keys()],
                titles = numbers.map(x => `article h${x + 1}`),
                selectors = [...titles, '[id^=exempl]'],
                elements = document.querySelectorAll(selectors.join(', ')),
                tpl = document.getElementById('tplLayer'),
                templateEngine = new TemplateEngine(),
                elementsOutput = []

            elements.forEach((el, i) => {
                let text, 
                    url

                if(el.id.startsWith('exemple-')){
                    text = el.parentNode.textContent
                }else{
                    el.setAttribute('id', `_${i}-${Utils.slugify(el.textContent)}`)
                    text = el.textContent
                }
                url = `#${el.id}`

                elementsOutput.push({
                    url,
                    text
                })
            })
            $nav.style.height = `${window.innerHeight - reference}px`
            window.addEventListener('resize', e =>{
                Utils.debounce(()=>{
                    $nav.style.height = `${window.innerHeight - reference}px`
                }, 200)()

            })
            $nav.insertAdjacentHTML('beforeend', templateEngine.render(tpl.textContent, {'rows': elementsOutput}))
            elements.forEach(el => new NavLayerSummaryObserver({el}, this.#subject))

            this.#subject.notify(window.scrollY)
            window.addEventListener('scroll', e =>{
                Utils.debounce(()=>{
                    this.#subject.notify(window.scrollY)
                }, 500)()
            })
        }
    }
}

Modifié par Niuxe (28 Aug 2025 - 17:08)

Salut,
Moi, ce que j'aime bien avec cette syntaxe, c'est que je ne suis pas obligé d'échapper les guillemets double ou simple. De plus les littéraux de gabarits - c'est comme cela qu'ils s'appellent - permettent les sauts de ligne et ils sont particulièrement utiles pour représenter le HTML.