Tagged Template Literals

Hello Everyone 👋,

Tagged template literals is an es6 feature which allow you to tag a template to a function.

If you are from react/graphql world you would have seen the below syntax.

	const Button = styled.button`
	color: blue;
	`;
	const userQuery = gql`
	{
	users {
	firstName
	}
	}
	`;

view raw tagged-template-intro.js hosted with ❤ by GitHub

Even If you do not know this syntax follow along you will understand.

Here styled.button and gql are actually just functions.

See the below example

	const generateIntro = (strings, ...values) => {
	console.log(strings); // [ 'My name is ', ' and I am a ', '' ]
	console.log(values); // [ 'Kannan', 'Javascript developer' ]
	let str = '';
	strings.forEach((string, i) => {
	str += string + (values[i] || '');
	});
	return str;
	}
	const name = 'Kannan';
	const role = 'Javascript developer';
	generateIntro`My name is ${name} and I am a ${role}`;
	// My name is Kannan and I am a Javascript developer

view raw tagged-template-sample.js hosted with ❤ by GitHub

Whenever a tagged function is called the first argument will be array of strings which is split on the interpolation.

Notice that we have used second argument with rest operator because each interpolation value will be passed as an argument to the function. Imagine there are 10 interpolation in a string getting each argument separately is not a good practice.

This can be used to completely transform the string.

Consider a use case while rendering a block in the html all its dynamic values needs to be made bold. We can write a simple function with tagged template easily to preprocess the string for us.

	const makeBold = (strings, ...values) => {
	let str = '';
	strings.forEach((string, i) => {
	str += `${string} ${values[i] ? `<strong>${values[i]}<strong>` : ''}`;
	});
	return str;
	}
	const name = 'Kannan';
	const role = 'Javascript developer';
	makeBold`My name is ${name} and I am a ${role}`;
	// My name is <strong>Kannan<strong> and I am a <strong>Javascript developer<strong>

view raw tagged-template-usecase.js hosted with ❤ by GitHub

Note: There will be always one value more in the strings array then the values.

Check out these awesome libraries that use tagged templates:
Styled-Components
Common-tags
i18n-tag
graphql-tag

Please like and share if you find this interesting.