Strings and Template Literals

📘 JavaScript Strings & Template Literals

1️⃣ Strings

A string is a sequence of characters enclosed in single quotes (' '), double quotes (" "), or backticks (` `).

JavaScript strings are based on Unicode, specifically UTF‑16 encoding.

Each character in a JavaScript string is stored as one or more UTF‑16 code units.

The first 128 Unicode code points (U+0000 to U+007F) are identical to ASCII, so ASCII characters work seamlessly inside JavaScript strings.

JavaScript can also represent characters far beyond ASCII — including emojis, symbols, and characters from any language — thanks to Unicode.

✅ Examples

ASCII characters (subset of Unicode)

let letter = "A";
console.log(letter.charCodeAt(0)); // 65 (same as ASCII)

Unicode characters

let heart = "❤";
console.log(heart.codePointAt(0)); // 10084 (U+2764)

Emoji (requires surrogate pairs in UTF‑16)

let smile = "😂";
console.log(smile.length);         // 2 (because UTF-16 uses surrogate pairs)
console.log(smile.codePointAt(0)); // 128514 (U+1F602)

🔑 Key Takeaways

• JavaScript strings are Unicode (UTF‑16), not limited to ASCII.
• ASCII is just the first 128 characters of Unicode, so all ASCII is valid in JS.
• For characters outside the Basic Multilingual Plane (like emojis), JavaScript uses surrogate pairs, which can make .length misleading.

// More Examples of strings
let str1 = "Hello";
let str2 = 'World';
let str3 = "He's a good boy";

console.log(str1); // Hello
console.log(str2); // World
console.log(str3); // He's a good boy
  

Common String Operations

let text = "JavaScript";
console.log(text.length);       // 10
console.log(text.toUpperCase()); // "JAVASCRIPT"
console.log(text.toLowerCase()); // "javascript"
console.log(text.charAt(0));     // "J"
console.log(text.includes("Script")); // true
console.log(text.slice(0,4));    // "Java"
  

2️⃣ Template Literals (ES6)

Template literals are strings enclosed by backticks (` `) instead of quotes. They allow:

• ✅ String interpolation (embed variables/expressions)
• ✅ Multi-line strings
• ✅ Expression evaluation inside strings

String Interpolation

let name = "Shivshanker";
let age = 25;

console.log(`My name is ${name} and I am ${age} years old.`);
// Output: My name is Shivshanker and I am 25 years old.
  

Multi-line Strings

let poem = `Roses are red,
Violets are blue,
JavaScript is fun,
And so are you!`;

console.log(poem);
  

Expressions Inside Template Literals

let x = 5, y = 10;
console.log(`The sum of ${x} and ${y} is ${x + y}.`);
// Output: The sum of 5 and 10 is 15.
  

Tagged Templates (Advanced)

Tagged templates let you customize how template literals are processed.

function highlight(strings, value) {
  return `${strings[0]}**${value}**${strings[1]}`;
}

let user = "Ashok";
console.log(highlight`Hello, ${user}!`);
// Output: Hello, **Ashok**!
  

✅ Quick Recap

• Strings → Basic text values using quotes.
• Template Literals → Use backticks, support interpolation, multi-line, and expressions.
• Prefer template literals for cleaner, more readable code.