Как поместить переменную javascript как атрибут стиля css в html?

Question

Мой код сейчас -

const replace = (note) => {
    return DOMPurify.sanitize(
        note.replace(
            /\S/g,
            "<span class='letter' style='display: inline-block'>$&</span>"
        )
    )
};

, как вы можете видеть в диапазоне, я напрямую устанавливаю стиль как отображение встроенного блока. Однако вместо этого я хочу установить стиль как некую переменную, например:

const test = (note, style) => {
    const styles = {display: 'inline-block'};
    return DOMPurify.sanitize(
        note.replace(
            /\S/g,
            "<span class='letter' style={styles}>$&</span>"
        )
    )
};

, но это не работает, потому что {styles} внутри диапазона не знает, что я имею в виду моя styles переменная. Кто-нибудь знает правильный синтаксис, чтобы это работало?

Answer 1

const test = (note, style) => {
    const styles = "display:inline-block;";
    return DOMPurify.sanitize(
        note.replace(
            /\S/g,
            "<span class='letter' style=" + styles + ">$&</span>"
        )
    )
};

Вы можете сделать так или иначе:

const test = (note, style) => {
    const styles = "display:inline-block;";
    return DOMPurify.sanitize(
        note.replace(
            /\S/g,
            `<span class='letter' style=${styles}>$&</span>`
        )
    )
};

Answer 2

Вы можете использовать литералы шаблонов:

const test = (note, style) => {
    const styles = "display:inline-block;";
    return DOMPurify.sanitize(
        note.replace(
            /\S/g,
            `<span class='letter' style=${styles}>$&</span>`
        )
    )
};

MDN docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals