YouTip${header}
- `;
for (const x of tags) {
html += `
- ${x} `; } html += `
Js String Templates
## JavaScript Template Literals (Template Strings)
Template literals (formerly known as template strings) are a powerful and flexible way to work with strings in JavaScript. Introduced in ES6 (ECMAScript 2015), they allow you to embed expressions, create multi-line strings, and perform string interpolation seamlessly without complex concatenation.
Instead of standard single quotes (`'`) or double quotes (`"`), template literals are enclosed by backtick (\`) characters.
---
## Syntax
```javascript
`string text`
`string text line 1
string text line 2`
`string text ${expression} string text`
tagFunction`string text ${expression} string text`
```
### Parameters
* **`string text`**: The literal text that will become part of the output. Almost all characters are allowed literally, including line breaks and other whitespace characters.
* **`${expression}`**: A placeholder containing a JavaScript expression (such as variables, mathematical operations, or function calls) to be evaluated and inserted at the current position.
* **`tagFunction`**: (Optional) A custom function used to parse the template literal. This advanced feature is known as a "tagged template".
---
## Key Features & Examples
### 1. Basic Usage
You can define a simple template literal just like a regular string, but using backticks (\`):
```javascript
let text = `Hello YouTip!`;
console.log(text); // Output: Hello YouTip!
```
### 2. Using Quotes Inside Strings
With template literals, you can freely use single quotes (`'`) and double quotes (`"`) inside the string without needing to escape them.
```javascript
let text = `He's often called "Johnny"`;
console.log(text); // Output: He's often called "Johnny"
```
If you need to use a backtick character inside the template literal itself, escape it using a backslash (`\`):
```javascript
let escapedBacktick = `This is a backtick: \``;
console.log(escapedBacktick); // Output: This is a backtick: `
```
### 3. Multi-line Strings
Before ES6, creating multi-line strings required using concatenation or newline characters (`\n`). Template literals preserve all newlines and whitespaces automatically.
```javascript
const multiLineText = `
This is
a multi-line
text block.
`;
console.log(multiLineText);
```
### 4. String Interpolation (Variables & Expressions)
Template literals allow you to inject variables and expressions directly into your strings using the `${expression}` placeholder.
#### Using Variables:
```javascript
const name = 'YouTip';
const age = 5;
const message = `My name is ${name} and I'm ${age} years old.`;
console.log(message);
// Output: My name is YouTip and I'm 5 years old.
```
#### Using Expressions:
You can perform mathematical operations, call functions, or run any valid JavaScript expression inside the placeholder.
```javascript
let price = 10;
let VAT = 0.25;
let total = `Total: $${(price * (1 + VAT)).toFixed(2)}`;
console.log(total);
// Output: Total: $12.50
```
---
## Practical Use Case: HTML Templates
Template literals are highly effective for dynamically generating HTML structures in frontend development.
```javascript
let header = "Trending Topics";
let tags = ["JavaScript", "ES6", "WebDev"];
let html = `