DEV Community

How do template literals in JavaScript work under the hood?

Safia Abdalla on October 05, 2019

So, template strings are a pretty neat feature in quite a few languages. If you're unfamiliar, template strings allow you to embed code expressions...

Read full post

John Luke Garofalo • Oct 5 '19

This is so cool, Safia! This is one of those things I’ve wondered about for so long but never really explored too deeply. I wanted to learn how template literals in libraries like styled-components work. Thank you for sharing what you learned!

ran81 • Oct 8 '19

Thanks for the post!

And for the really brave, you can check out the c++ code:
github.com/nodejs/node/blob/57c708...

  // "should_cook" means that the span can be "cooked": in tagged template
  // literals, both the raw and "cooked" representations are available to user
  // code ("cooked" meaning that escape sequences are converted to their
  // interpreted values). Invalid escape sequences cause the cooked span
  // to be represented by undefined, instead of being a syntax error.
  // "tail" indicates that this span is the last in the literal.

Scary stuff 🙈

zchtodd • Oct 5 '19

Pretty cool! I would be a little intimidated to delve into a codebase that huge, so major props for that. I could see this being an interesting series that could dig into widely used code, explaining how it works.

I would love to see some code snippets in the posts themselves, too!

Safia Abdalla • Oct 5 '19

I’ve got other posts in this style as well. You can view them on my profile page. The publication date on most of them is around six months ago if you want to narrow down your search.

Hatem Houssein • Oct 5 '19

Thanks a lot for the digging and explaining it to us with code references! 👏

KristijanFištrek • Oct 8 '19

Amazing work! 🤘