Skip to content

Instantly share code, notes, and snippets.

@nem035
Forked from dherman/template-literals.md
Created January 25, 2017 05:11
Show Gist options
  • Save nem035/b3b3d16c7aedad86d0b1d42ff8e8f06e to your computer and use it in GitHub Desktop.
Save nem035/b3b3d16c7aedad86d0b1d42ff8e8f06e to your computer and use it in GitHub Desktop.
What can you do with ES6 string template literals?

DOM selectors

var elements = query`.${className}`;

Localization

var message = l10n`Hello ${name}; you are visitor number ${visitor}:n!
You have ${money}:c in your account!`;

Customizable regexps

var match = input.match(re`\d+${separator}\d+`);

Multiline regexps

var parts = str.match(regex`
    ^                    # match at start of string only
    / (?<year> [^/]+ )   # capture top dir name as year
    / (?<month> [^/]+ )  # capture subdir name as month
    / (?<title> [^/]+ )  # capture file name without ext as title
    \.html? $            # .htm or .html file ext at end of path
`);

See also: https://gist.github.com/slevithan/4222600

Embedded HTML

html`<a href="${url}">${text}</a>`

Shell commands

var proc = sh`ps ax | grep ${pid}`;

Byte strings

var buffer = bytes`455336465457210a`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment