False '0' prefixed octal literal within embedded strings

Twifty :

The following code contains a string within a string. Since the bodies of es6 classes are in strict mode, it fails to compile due to the inner string looking like it contains an octal value.

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

Workarounds include escaping the string or using characters in their non-unicode form.

My workflow involves creating the HTML and CSS in a fiddle, then copy-pasting the code into an encapsulating es6 class (I'm limited to using a single file).

Is there anything I can do to avoid the error? I was hoping to wrap the string but it is still within the class body.

CertainPerformance :

You might use String.raw with the template literal, so that the backslashes are interpreted as literal backslashes, not escape characters:

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>

(note that content only applies to :before and :after psuedo-elements)

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=31976&siteId=1