• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
JavaScriptSource

JavaScriptSource

Search 5,000+ Free JavaScript Snippets

  • Home
  • Browse Snippets
    • Addon
    • Ajax
    • Buttons
    • Cookies
    • CSS
    • Featured
    • Forms
    • Games
    • Generators
    • Image Effects
    • Math Related
    • Miscellaneous
    • Multimedia
    • Navigation
    • Page Details
    • Passwords
    • Text Effects
    • Time & Date
    • User Details
Home / Miscellaneous / Template Literals

Template Literals

Template Literals

Introduced in ES6, template literals provide a simpler way to create strings that span multiple lines or contain data.

Instead of a quote, template literals start and end with backticks (`). You do not need to concatenate new lines in template literals.

var str1 =
	`<h1>Hello, world!</h1>
	<p>How are you today?</p>`;

// logs "<h1>Hello, world!</h1><p>How are you today?</p>"
console.log(str1);

You can use variables in template literals (sometimes called expressions) by wrapping the name of the variable in curly brackets with a leading dollar sign (${VARIABLE_NAME}).

var greeting = 'Hi, universe!';
var message = 'How is the weather today?';

var str2 =
	`<h1>${greeting}</h1>
	<p>${message}</p>`;

// logs "<h1>Hi, universe!</h1><p>How is the weather today?</p>"
console.log(str2);

Source

https://vanillajstoolkit.com/reference/strings/template-literals/

Miscellaneous

Related Snippets:

  • Filter out matching array elements
  • Insert an element before another one
  • Perform a shallow merge of two or more objects
  • Check if the user color scheme preference is dark

Primary Sidebar

Popular Posts

Story Generator

IP Grabber – get a users IP address with JavaScript

Simple Calendar

Remove Ads

Astrological Calculator

Copyright © 2025 JavaScriptSource.com

  • About
  • Privacy Policy
  • FAQ
  • Jobs For Developers