Is String In An Html Tag The Template Literal

A quick introduction to Tagged Template Literals

past Michael Ozoemena

In this article, I'chiliad going to exist talking about what "tagged template literals" are and some places where I've seen them existence used.

What are "tagged template literals"?

Tagged template literals were enabled by a new engineering science introduced in ES6, called "template literals". This is simply a syntax that makes string interpolation possible in JavaScript. Before template literals was built-in, JavaScript developers would need to practise ugly string chain.

Tagged template literals offers you the opportunity to parse template literals in whatever way y'all desire. It works by combining functions with template literals. There are two parts of a tagged template literal, the first one existence the tag function and the 2nd, the template literal.

                const coolVariable = "Cool Value";

                const anotherCoolVariable = "Another Absurd Value";

                randomTagFunctionName`${coolVariable} in a tagged template literal with ${anotherCoolVariable} just sitting at that place`

Now, the first parameter in the tag function is a variable containing an array of strings in the template literal:

                office randomTagFunctionName(firstParameter) {

                panel.log(firstParameter);     // ["", " in a tagged template literal with ", " only sitting there"]

And all other subsequent parameters will contain the values passed to the template literal:

                function randomTagFunctionName(firstParameter, secondParameter, thirdParameter) {

                console.log(secondParameter);   // "Absurd Value"

                console.log(thirdParameter);   // "Another Cool Value"

Taking advantage of the ES6 Residuum operator, nosotros can redefine our function like this:

                function randomTagFunctionName(firstParameter, ...otherParameters) {

                panel.log(otherParameters);   // ["Cool Value", "Another Cool Value"]

Tagged Template Literals in Styled-Components.

Now that you understand what tagged template literals are, allow united states discuss an application of it in the real world.

Styled-Components is a JavaScript library that lets yous create and adhere CSS styles to your React and React Native components. Here's what that looks like:

                const Push = styled.button`  colour: red;`

In the example to a higher place, Push button isn't just a variable, information technology's a component. That means you tin mix it with other components and its output is an HTML push button chemical element.

This is a very exciting use instance for tagged template literals because it lets you take scoped CSS in a way that still keeps your component file clean and makes you feel similar you are writing CSS in a regular stylesheet. Without tagged template literals, we would have to represent that fashion as a JavaScript object like this:

                const Button = styled.push({  colour: 'red'})

Another utilize instance is with the graphql-tag library used in Apollo GraphQL. I don't think in that location is a possible way to not use the graphql-tag library when dealing with Apollo GraphQL (if in that location is, please allow me know!).

In conclusion.

I think it's great to learn new technologies and even better to wait at ways in which others have used information technology to solve problems. If y'all have other existent-world use cases for Tagged Template Literals, delight let me know.

PS: "Real-World" also means your side-projects or codesandbox code samples.

Learn to lawmaking for free. freeCodeCamp's open up source curriculum has helped more 40,000 people go jobs as developers. Go started