Ложный восьмеричный префикс «0» во встроенных строках

Question

Следующий код содержит строку внутри строки. Поскольку тела классов es6 находятся в строгом режиме, он не может скомпилироваться из-за того, что внутренняя строка выглядит так, как будто она содержит восьмеричное значение.

class Test {
  static get template () { return `
    .class {
      content: "\2713\0020"
    }
  `}
}

Обходные пути включают экранирование строки или использование символов в не-юникоде form.

Мой рабочий процесс включает создание HTML и CSS в скрипте, а затем копирование и вставку кода в инкапсулирующий класс es6 (я ограничен использованием одного файла).

Что я могу сделать, чтобы избежать ошибки? Я надеялся обернуть строку, но она все еще в теле класса.

Answer 1

Вы можете использовать String.raw с литералом шаблона, чтобы обратные слеши интерпретировались как литеральные обратные слэши, а не как экранирующие символы:

class Test {
  static get template () { return String.raw`
    .class:before {
      content: "\2713\0020"
    }
  `}
}

document.body.appendChild(document.createElement('style')).textContent = Test.template;

<div class="class">text</div>

(обратите внимание, что content относится только к :before и :after псевдоэлементам)

Answer 2

Вы можете поставить u после \:

"use strict";

class Test {
  static get template () { return `
    .class {
      content: "\u2713\u0020"
    }
  `}
}

console.log(Test.template)