From d91e3ff25e28fa871a30df6e914e0c0c6d309304 Mon Sep 17 00:00:00 2001 From: oscar Date: Wed, 22 Oct 2025 19:27:24 +0200 Subject: [PATCH 1/4] Add JS template-literal concept to Docs --- .../template-literals/template-literals.md | 114 ++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 content/javascript/concepts/template-literals/template-literals.md diff --git a/content/javascript/concepts/template-literals/template-literals.md b/content/javascript/concepts/template-literals/template-literals.md new file mode 100644 index 00000000000..9eb4b979f4e --- /dev/null +++ b/content/javascript/concepts/template-literals/template-literals.md @@ -0,0 +1,114 @@ +--- +Title: 'Template literals' +Description: 'String literals that allow embedded expressions, multi-line strings, and improved readability in JavaScript.' +Subjects: + - 'Web Development' + - 'Computer Science' + +Tags: + - 'JavaScript' + - 'Strings' + - 'ES6' + - 'Syntax' +CatalogContent: + - 'learn-javascript' + - 'paths/full-stack-engineer-career-path' +--- + +**Template literals** are string literals in JavaScript that allow embedded expressions, multi-line strings, and more readable string formatting. Introduced in ES6, they make string manipulation more powerful and expressive than traditional concatenation. + +Template literals are enclosed by **backticks** (`` ` ``) instead of single or double quotes. + +## Syntax +Template literals use backticks (`` `...` ``) to define the string. To embed expressions, use `${expression}` within the template literal. The syntax is as follows: + +```js +`string text` + +`string text ${expression} string text` + +`string text line 1 + string text line 2` + +``` +- Backticks (`` `...` ``): Define the template literal. +- `${expression}`: Placeholder for JavaScript expressions, which can include variables, calculations, or function calls. +- Multi-line support: Line breaks within backticks are preserved, eliminating the need for `\n`. + + +## Basic Example +Template literals simplify string concatenation by allowing variables or expressions to be embedded directly: + +```js +const name = "Oscar"; +const greeting = `Hello, ${name}!`; +console.log(greeting); // Output: Hello, Oscar! + +``` + +In this example, the variable `name` is embedded using `${}`. This is more readable than traditional concatenation (`"Hello, " + name + "!"`). + + + +## Multi-line Strings +Template literals make multi-line strings straightforward without needing explicit newline characters: + +```js +const poem = ` + Roses are red, + Violets are blue, + JavaScript is fun, + And so are you! +`; +console.log(poem); + +``` +The output preserves the line breaks as written, making it ideal for formatting text like HTML or poetry. + + + +## Expression Interpolation +Template literals can include any valid JavaScript expression inside `${}`: + +```js +const a = 5; +const b = 10; +const result = `The sum of ${a} and ${b} is ${a + b}.`; +console.log(result); // Output: The sum of 5 and 10 is 15. + +``` +Expressions can also include function calls or complex calculations: + +```js +const getName = () => "Oscar"; +const message = `Hi, ${getName()}! Your score is ${Math.random() * 100}.`; +console.log(message); // Output: Hi, Oscar! Your score is . + +``` + + +## Tagged Template Literals +Template literals can be used with a tag function to customize their behavior. A tag function processes the template literal’s strings and expressions: + + +```js +function myTag(strings, ...values) { + return strings[0] + values[0].toUpperCase() + strings[1]; +} +const name = "Oscar"; +const tagged = myTag`Hello, ${name}!`; +console.log(tagged); // Output: Hello, OSCAR! + +``` +Here, `myTag` is a custom function that manipulates the template literal’s parts. The `strings` parameter holds the static parts, and `values` contains the evaluated expressions. + + +## Codebyte Example + +```codebyte/js +const user = "Oscar"; +const age = 25; +const info = `User: ${user}, Age: ${age}`; +console.log(info); + +``` From f1176e451474ac2798c3b1e34cdbeb02d638214b Mon Sep 17 00:00:00 2001 From: Mamta Wardhani Date: Tue, 28 Oct 2025 11:36:54 +0530 Subject: [PATCH 2/4] Revise template literals documentation Updated the description and subjects for clarity. Improved examples and formatting for template literals. --- .../template-literals/template-literals.md | 85 +++++++++++++------ 1 file changed, 57 insertions(+), 28 deletions(-) diff --git a/content/javascript/concepts/template-literals/template-literals.md b/content/javascript/concepts/template-literals/template-literals.md index 9eb4b979f4e..898b7eb78d7 100644 --- a/content/javascript/concepts/template-literals/template-literals.md +++ b/content/javascript/concepts/template-literals/template-literals.md @@ -1,15 +1,15 @@ --- Title: 'Template literals' -Description: 'String literals that allow embedded expressions, multi-line strings, and improved readability in JavaScript.' -Subjects: - - 'Web Development' +Description: 'Define strings enclosed in backticks that allow embedded expressions using dollar sign and curly braces and support multi-line text in JavaScript.' +Subjects: - 'Computer Science' - -Tags: + - 'Web Development' +Tags: + - 'ES6' - 'JavaScript' - 'Strings' - - 'ES6' - 'Syntax' + - 'Templates' CatalogContent: - 'learn-javascript' - 'paths/full-stack-engineer-career-path' @@ -19,38 +19,42 @@ CatalogContent: Template literals are enclosed by **backticks** (`` ` ``) instead of single or double quotes. -## Syntax -Template literals use backticks (`` `...` ``) to define the string. To embed expressions, use `${expression}` within the template literal. The syntax is as follows: +## Syntax -```js +Template literals use backticks (`` ` ``) to define the string. To embed expressions, use `${expression}` within the template literal. The syntax is as follows: + +```pseudo `string text` `string text ${expression} string text` `string text line 1 string text line 2` - ``` -- Backticks (`` `...` ``): Define the template literal. + +- Backticks (`` ` ``): Define the template literal. - `${expression}`: Placeholder for JavaScript expressions, which can include variables, calculations, or function calls. - Multi-line support: Line breaks within backticks are preserved, eliminating the need for `\n`. +## Basic Example -## Basic Example Template literals simplify string concatenation by allowing variables or expressions to be embedded directly: -```js +````js const name = "Oscar"; const greeting = `Hello, ${name}!`; -console.log(greeting); // Output: Hello, Oscar! +console.log(greeting); -``` - -In this example, the variable `name` is embedded using `${}`. This is more readable than traditional concatenation (`"Hello, " + name + "!"`). +The output of this code is: +```shell +Hello, Oscar! +```` +In this example, the variable `name` is embedded using `${}`. This is more readable than traditional concatenation (`"Hello, " + name + "!"`). ## Multi-line Strings + Template literals make multi-line strings straightforward without needing explicit newline characters: ```js @@ -61,35 +65,54 @@ const poem = ` And so are you! `; console.log(poem); - ``` -The output preserves the line breaks as written, making it ideal for formatting text like HTML or poetry. +The output for this is: +```shell + + Roses are red, + Violets are blue, + JavaScript is fun, + And so are you! +``` + +The output preserves the line breaks as written, making it ideal for formatting text like HTML or poetry. ## Expression Interpolation + Template literals can include any valid JavaScript expression inside `${}`: ```js const a = 5; const b = 10; const result = `The sum of ${a} and ${b} is ${a + b}.`; -console.log(result); // Output: The sum of 5 and 10 is 15. +console.log(result); +``` + +The output here is: +```shell +The sum of 5 and 10 is 15. ``` + Expressions can also include function calls or complex calculations: ```js const getName = () => "Oscar"; const message = `Hi, ${getName()}! Your score is ${Math.random() * 100}.`; -console.log(message); // Output: Hi, Oscar! Your score is . - +console.log(message); ``` +The output of this code is: + +```shell +Hi, Oscar! Your score is 87.62799470776743. +``` ## Tagged Template Literals -Template literals can be used with a tag function to customize their behavior. A tag function processes the template literal’s strings and expressions: +Template literals can be combined with a tag function to customize how the strings and expressions are processed: ```js function myTag(strings, ...values) { @@ -97,18 +120,24 @@ function myTag(strings, ...values) { } const name = "Oscar"; const tagged = myTag`Hello, ${name}!`; -console.log(tagged); // Output: Hello, OSCAR! +console.log(tagged); +``` + +The output of this code is: +```shell +Hello, OSCAR! ``` + Here, `myTag` is a custom function that manipulates the template literal’s parts. The `strings` parameter holds the static parts, and `values` contains the evaluated expressions. +## Codebyte Example -## Codebyte Example +In this example, template literals are used to embed variables directly into a string. The placeholders `${user}` and `${age}` are replaced with their values when the string is evaluated, producing a readable, formatted output without using concatenation: -```codebyte/js +```codebyte/javasstring const user = "Oscar"; const age = 25; const info = `User: ${user}, Age: ${age}`; -console.log(info); - +console.log(info); ``` From 84edda19d53cfd063fd5513cf5c12d09c8a6e8df Mon Sep 17 00:00:00 2001 From: Mamta Wardhani Date: Tue, 28 Oct 2025 11:37:45 +0530 Subject: [PATCH 3/4] Enhance template literals description with resource link Updated the description of template literals to include a link to string resources. --- .../javascript/concepts/template-literals/template-literals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/javascript/concepts/template-literals/template-literals.md b/content/javascript/concepts/template-literals/template-literals.md index 898b7eb78d7..b9c1c7185f4 100644 --- a/content/javascript/concepts/template-literals/template-literals.md +++ b/content/javascript/concepts/template-literals/template-literals.md @@ -15,7 +15,7 @@ CatalogContent: - 'paths/full-stack-engineer-career-path' --- -**Template literals** are string literals in JavaScript that allow embedded expressions, multi-line strings, and more readable string formatting. Introduced in ES6, they make string manipulation more powerful and expressive than traditional concatenation. +**Template literals** are [string](https://www.codecademy.com/resources/docs/python/strings) literals in JavaScript that allow embedded expressions, multi-line strings, and more readable string formatting. Introduced in ES6, they make string manipulation more powerful and expressive than traditional concatenation. Template literals are enclosed by **backticks** (`` ` ``) instead of single or double quotes. From 063b566e5c2ef92bd9313e1be84a53ae538a1fc9 Mon Sep 17 00:00:00 2001 From: Sriparno Roy Date: Thu, 30 Oct 2025 11:57:20 +0530 Subject: [PATCH 4/4] Minor changes --- .../template-literals/template-literals.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/content/javascript/concepts/template-literals/template-literals.md b/content/javascript/concepts/template-literals/template-literals.md index b9c1c7185f4..4302f85e7a0 100644 --- a/content/javascript/concepts/template-literals/template-literals.md +++ b/content/javascript/concepts/template-literals/template-literals.md @@ -1,5 +1,5 @@ --- -Title: 'Template literals' +Title: 'Template Literals' Description: 'Define strings enclosed in backticks that allow embedded expressions using dollar sign and curly braces and support multi-line text in JavaScript.' Subjects: - 'Computer Science' @@ -9,8 +9,7 @@ Tags: - 'JavaScript' - 'Strings' - 'Syntax' - - 'Templates' -CatalogContent: +CatalogContent: - 'learn-javascript' - 'paths/full-stack-engineer-career-path' --- @@ -36,20 +35,21 @@ Template literals use backticks (`` ` ``) to define the string. To embed express - `${expression}`: Placeholder for JavaScript expressions, which can include variables, calculations, or function calls. - Multi-line support: Line breaks within backticks are preserved, eliminating the need for `\n`. -## Basic Example +## Using Template Literals Template literals simplify string concatenation by allowing variables or expressions to be embedded directly: -````js -const name = "Oscar"; +```js +const name = 'Oscar'; const greeting = `Hello, ${name}!`; console.log(greeting); +``` The output of this code is: ```shell Hello, Oscar! -```` +``` In this example, the variable `name` is embedded using `${}`. This is more readable than traditional concatenation (`"Hello, " + name + "!"`). @@ -84,22 +84,22 @@ The output preserves the line breaks as written, making it ideal for formatting Template literals can include any valid JavaScript expression inside `${}`: ```js -const a = 5; -const b = 10; -const result = `The sum of ${a} and ${b} is ${a + b}.`; +const a = 6; +const b = 12; +const result = `Sum = ${a + b}`; console.log(result); ``` The output here is: ```shell -The sum of 5 and 10 is 15. +Sum = 18 ``` Expressions can also include function calls or complex calculations: ```js -const getName = () => "Oscar"; +const getName = () => 'Oscar'; const message = `Hi, ${getName()}! Your score is ${Math.random() * 100}.`; console.log(message); ``` @@ -118,7 +118,7 @@ Template literals can be combined with a tag function to customize how the strin function myTag(strings, ...values) { return strings[0] + values[0].toUpperCase() + strings[1]; } -const name = "Oscar"; +const name = 'Oscar'; const tagged = myTag`Hello, ${name}!`; console.log(tagged); ``` @@ -135,7 +135,7 @@ Here, `myTag` is a custom function that manipulates the template literal’s par In this example, template literals are used to embed variables directly into a string. The placeholders `${user}` and `${age}` are replaced with their values when the string is evaluated, producing a readable, formatted output without using concatenation: -```codebyte/javasstring +```codebyte/javascript const user = "Oscar"; const age = 25; const info = `User: ${user}, Age: ${age}`;