Skip to content

Instantly share code, notes, and snippets.

@dherman
Last active July 4, 2021 10:41
Show Gist options
  • Star 19 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save dherman/6165867 to your computer and use it in GitHub Desktop.
Save dherman/6165867 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`;
@rauschma
Copy link

rauschma commented Aug 7, 2013

For some of these examples, it may make sense to briefly explain why they are cool and how they would work.

@maxhoffmann
Copy link

Yes an explanation would be great.

I guess this would not work. ;)

let serverCrash = sh`rm -R /`;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment