JavaScript Strings and Template Literals

// Literal syntax (preferred)
const single = 'Hello';
const double = "World";
const template = `Hello ${name}`;

// String constructor (type conversion)
String(123); // "123"
String(true); // "true"
String(null); // "null"
String({a: 1}); // "[object Object]"

// Avoid String object (wrapper)
const bad = new String("text"); // typeof bad === "object" ❌
const good = "text"; // typeof good === "string" ✓

// Escape sequences
'Line 1\nLine 2'; // newline
'Tab\tseparated'; // tab
'She said "hi"'; // double quotes in single
"It's okay"; // single quote in double
'Can\'t escape'; // escaped single quote

// More escape sequences
'C:\\Users\\name'; // backslashes
'First\x20Second'; // space using hex
'\u00A9 2025'; // © 2025
'\u{1F4A9}'; // 💩 (requires code point syntax)

// Multiline strings
const multi = `Line 1
Line 2
Line 3`; // preserves newlines

const legacy = 'Line 1\n' +
               'Line 2\n' +
               'Line 3'; // old way

// Raw strings (no escape processing)
String.raw`C:\Users\name`; // "C:\\Users\\name"
String.raw`\n\t`; // "\\n\\t" (literal backslashes)

// Empty and whitespace
const empty = '';
const space = ' ';
const whitespace = '   \t\n   ';

// Immutability
const str = 'hello';
str[0] = 'H'; // No effect - strings are immutable
str.toUpperCase(); // Returns "HELLO", str unchanged

const str = 'Hello World';

// Access characters
str.charAt(0); // "H"
str[0]; // "H" (bracket notation)
str.at(0); // "H"
str.at(-1); // "d" (last character)
str.at(-2); // "l" (second to last)

// Character codes
str.charCodeAt(0); // 72 (UTF-16 code unit)
str.codePointAt(0); // 72 (Unicode code point)

// Emoji handling
const emoji = '😀';
emoji.length; // 2 ❌ (surrogate pair)
emoji.codePointAt(0); // 128512 ✓
emoji.charCodeAt(0); // 55357 ❌ (high surrogate only)

// Substrings
str.slice(0, 5); // "Hello"
str.slice(6); // "World"
str.slice(-5); // "World" (last 5)
str.slice(-5, -1); // "Worl"

str.substring(0, 5); // "Hello" (same as slice)
str.substring(5, 0); // "Hello" (swaps args!)

// Case conversion
'JavaScript'.toUpperCase(); // "JAVASCRIPT"
'JavaScript'.toLowerCase(); // "javascript"

// Turkish locale example
'i'.toLocaleUpperCase('tr'); // "İ" (dotted capital I)
'I'.toLocaleLowerCase('tr'); // "ı" (dotless small i)

// Whitespace removal
'  hello  '.trim(); // "hello"
'  hello  '.trimStart(); // "hello  "
'  hello  '.trimEnd(); // "  hello"

// Padding
'5'.padStart(3, '0'); // "005"
'123'.padStart(5, '0'); // "00123"
'hello'.padEnd(10, '.'); // "hello....."

const cardNum = '1234';
cardNum.padStart(16, '*'); // "************1234"

// Repeat
'*'.repeat(10); // "**********"
'abc'.repeat(3); // "abcabcabc"

// Concatenation
'Hello'.concat(' ', 'World'); // "Hello World"
'a' + 'b' + 'c'; // "abc" (preferred)

// Chaining
const result = '  HELLO  '
    .trim()
    .toLowerCase()
    .repeat(2)
    .padStart(15, '.');
// "...hellohello"

// Basic interpolation
const name = 'Alice';
const age = 25;
const msg = `Hello ${name}, you are ${age} years old`;
// "Hello Alice, you are 25 years old"

// Expressions
const a = 10, b = 20;
`Sum: ${a + b}`; // "Sum: 30"
`Comparison: ${a > b ? 'a' : 'b'}`; // "Comparison: b"
`Array: ${[1, 2, 3].join(', ')}`; // "Array: 1, 2, 3"

// Multiline
const html = `
  <div class="card">
    <h2>${name}</h2>
    <p>Age: ${age}</p>
  </div>
`; // Preserves indentation and newlines

// Nesting
`Outer ${`Inner ${1 + 1}`} text`; // "Outer Inner 2 text"

// String.raw - no escape processing
String.raw`C:\Users\name`; // "C:\\Users\\name"
String.raw`Line 1\nLine 2`; // "Line 1\\nLine 2"

// Custom tag function - basic
function upper(strings, ...values) {
    let result = '';
    strings.forEach((str, i) => {
        result += str;
        if (i < values.length) {
            result += String(values[i]).toUpperCase();
        }
    });
    return result;
}

upper`Hello ${name}, age ${age}`;
// "Hello ALICE, age 25"

// Tag function - HTML escaping
function html(strings, ...values) {
    return strings.reduce((result, str, i) => {
        const value = values[i] || '';
        const escaped = String(value)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
        return result + str + escaped;
    }, '');
}

const userInput = '<script>alert("xss")</script>';
html`<div>${userInput}</div>`;
// "<div>&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;</div>"

// Tag function - SQL (parameterized queries)
function sql(strings, ...values) {
    return {
        query: strings.join('?'),
        params: values
    };
}

const userId = 123;
const query = sql`SELECT * FROM users WHERE id = ${userId}`;
// {query: "SELECT * FROM users WHERE id = ?", params: [123]}

// Tag function - i18n translation
function t(strings, ...values) {
    const key = strings.join('{}');
    // Look up translation for key
    return translate(key, values);
}

t`Welcome ${name}!`; // Translates "Welcome {}!" with name

// Access raw strings
function logger(strings, ...values) {
    console.log('Processed:', strings);
    console.log('Raw:', strings.raw);
    console.log('Values:', values);
}

logger`Line 1\nLine 2`;
// Processed: ["Line 1
// Line 2"]
// Raw: ["Line 1\\nLine 2"]
// Values: []

// Empty interpolations
`a${null}b`; // "anullb"
`a${undefined}b`; // "aundefinedb"
`a${''}b`; // "ab"

const user = {name: 'Alice', age: 25, online: true};
const items = ['apple', 'banana', 'orange'];
const count = 0;

// Basic variable
`Username: ${user.name}`; // "Username: Alice"

// Arithmetic expressions
`Total: ${(99.99 * 1.1).toFixed(2)}`; // "Total: $109.99"
`Progress: ${(completed / total * 100).toFixed(1)}%`;

// Function calls
`Generated at ${new Date().toISOString()}`;
`Random: ${Math.random().toFixed(4)}`;

// Ternary operator
`Status: ${user.online ? '🟢 Online' : '🔴 Offline'}`;
`You have ${count === 0 ? 'no' : count} items`;

// Logical AND (conditional content)
`${user.admin && 'Admin Panel'}`;
// If admin: "Admin Panel", else: "false" ❌

// Better: use ternary for boolean
`${user.admin ? 'Admin Panel' : ''}`;
// If admin: "Admin Panel", else: ""

// Logical OR (fallback)
`Hello ${user.nickname || user.name}`;
`Count: ${count || 'N/A'}`; // ❌ 0 becomes 'N/A'!

// Nullish coalescing (better fallback)
`Count: ${count ?? 'N/A'}`; // ✓ 0 stays 0
`Name: ${user.name ?? 'Anonymous'}`;

// Array methods
`Items: ${items.join(', ')}`; // "Items: apple, banana, orange"
`Count: ${items.length}`;
`First: ${items[0]}`;

// Array rendering with map
`<ul>${items.map(item => `<li>${item}</li>`).join('')}</ul>`;
// "<ul><li>apple</li><li>banana</li><li>orange</li></ul>"

// Object methods
`User: ${JSON.stringify(user)}`;
`Keys: ${Object.keys(user).join(', ')}`;

// Nested templates
const className = `btn ${user.online ? 'btn-success' : 'btn-danger'}`;
`<button class="${className}">${user.name}</button>`;

// Complex expressions
const price = 99.99;
const discount = 0.15;
const tax = 0.08;
`Final: ${(price * (1 - discount) * (1 + tax)).toFixed(2)}`;

// Method chaining
`Result: ${str.trim().toLowerCase().split(' ').join('-')}`;

// Type coercion
`Number: ${123}`; // "Number: 123"
`Boolean: ${true}`; // "Boolean: true"
`Null: ${null}`; // "Null: null"
`Undefined: ${undefined}`; // "Undefined: undefined"
`Object: ${{}}`; // "Object: [object Object]"
`Array: ${[1, 2]}`; // "Array: 1,2"

// Multi-line with interpolation
const html = `
  <div class="user-card ${user.online ? 'online' : 'offline'}">
    <h2>${user.name}</h2>
    <p>Age: ${user.age}</p>
    <p>Status: ${user.online ? '🟢' : '🔴'}</p>
  </div>
`;

// Escaping interpolation
const literal = String.raw`Not interpolated: \${variable}`;
// "Not interpolated: ${variable}"

// BMP characters (single code unit)
const ascii = 'A';
ascii.length; // 1
ascii.charCodeAt(0); // 65
ascii.codePointAt(0); // 65

const copyright = '\u00A9'; // ©
copyright.length; // 1

// Astral plane (emoji, historic scripts)
const emoji = '😀';
emoji.length; // 2 ❌ (surrogate pair!)
emoji.charCodeAt(0); // 55357 (high surrogate)
emoji.charCodeAt(1); // 56832 (low surrogate)
emoji.codePointAt(0); // 128512 ✓ (full code point)

// Creating from code points
String.fromCharCode(65); // "A"
String.fromCharCode(0x00A9); // "©"

// Emoji requires fromCodePoint
String.fromCodePoint(0x1F600); // "😀"
String.fromCharCode(0x1F600); // ❌ Wrong!

// Surrogate pair manually (don't do this!)
String.fromCharCode(0xD83D, 0xDE00); // "😀" (works but use fromCodePoint)

// Code point escape syntax
'\u{1F600}'; // "😀"
'\u{1F4A9}'; // "💩"
'\u{1F680}'; // "🚀"

// Length issues with emoji
'hello'.length; // 5 ✓
'😀'.length; // 2 ❌
'👨‍👩‍👧‍👦'.length; // 11 ❌ (family emoji with ZWJ)

// Count actual characters
[...'hello'].length; // 5
[...'😀'].length; // 1 ✓
[...'😀🎉'].length; // 2 ✓

// However, combining characters still tricky
[...'👨‍👩‍👧‍👦'].length; // 7 (4 people + 3 ZWJ)

// Iterate correctly
for (const char of '😀🎉') {
    console.log(char); // "😀", "🎉" (correct!)
}

// Split fails with emoji
'😀🎉'.split(''); // ['�','�','�','�'] ❌
[...'😀🎉']; // ['😀','🎉'] ✓

// Unicode normalization
const e1 = '\u00E9'; // é (single code point)
const e2 = '\u0065\u0301'; // é (e + combining acute accent)

e1 === e2; // false ❌
e1.length; // 1
e2.length; // 2

e1.normalize() === e2.normalize(); // true ✓

// Forms: NFC (composed), NFD (decomposed)
'café'.normalize('NFC').length; // 4
'café'.normalize('NFD').length; // 5 (e + combining accent)

// Locale-aware comparison
const strings = ['ä', 'z', 'a'];
strings.sort(); // ['a', 'z', 'ä'] ❌
strings.sort((a, b) => a.localeCompare(b, 'de'));
// ['a', 'ä', 'z'] ✓ (German collation)

'ä'.localeCompare('z', 'de'); // -1 (ä comes before z)
'ä'.localeCompare('z', 'sv'); // 1 (ä comes after z in Swedish)

// Case comparison with locale
'i'.toLocaleUpperCase('en'); // "I"
'i'.toLocaleUpperCase('tr'); // "İ" (dotted capital I in Turkish)

// Real character count (approximate)
function graphemeLength(str) {
    return [...new Intl.Segmenter().segment(str)].length;
}

graphemeLength('😀'); // 1
graphemeLength('👨‍👩‍👧‍👦'); // 1 (treats family as one grapheme)

const str = 'The quick brown fox jumps over the lazy dog';

// match - without /g (first match with details)
str.match(/quick/);
// ["quick", index: 4, input: "...", groups: undefined]

str.match(/(\w+) (\w+)/);
// ["The quick", "The", "quick", index: 0, ...]

// match - with /g (all matches, no details)
str.match(/\w+/g);
// ["The", "quick", "brown", "fox", ...]

str.match(/o/g); // ["o", "o", "o", "o"]

// matchAll - all matches with details
const regex = /t(\w+)/gi;
const matches = [...str.matchAll(regex)];
matches[0]; // ["The", "he", index: 0, ...]
matches[1]; // ["the", "he", index: 31, ...]

// matchAll with named groups
const pattern = /(?<word>\w+) (?<num>\d+)/g;
const text = 'item 1, thing 2';
for (const match of text.matchAll(pattern)) {
    console.log(match.groups.word, match.groups.num);
    // "item" "1", "thing" "2"
}

// search - find position
str.search(/brown/); // 10
str.search(/cat/); // -1
str.search(/THE/i); // 0 (case-insensitive)

// replace - string or regexp
str.replace('dog', 'cat');
// "The quick brown fox jumps over the lazy cat"

str.replace(/the/gi, 'a');
// "a quick brown fox jumps over a lazy dog"

// replace with function
str.replace(/\b\w{4}\b/g, match => match.toUpperCase());
// "The QUICK brown fox JUMPS OVER the LAZY dog"

// replace with capture groups
'John Smith'.replace(/(\w+) (\w+)/, '$2, $1');
// "Smith, John"

// replace with named groups
'2025-12-17'.replace(
    /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/,
    '

          
const str = 'The quick brown fox jumps over the lazy dog';

// match - without /g (first match with details)
str.match(/quick/);
// ["quick", index: 4, input: "...", groups: undefined]

str.match(/(\w+) (\w+)/);
// ["The quick", "The", "quick", index: 0, ...]

// match - with /g (all matches, no details)
str.match(/\w+/g);
// ["The", "quick", "brown", "fox", ...]

str.match(/o/g); // ["o", "o", "o", "o"]

// matchAll - all matches with details
const regex = /t(\w+)/gi;
const matches = [...str.matchAll(regex)];
matches[0]; // ["The", "he", index: 0, ...]
matches[1]; // ["the", "he", index: 31, ...]

// matchAll with named groups
const pattern = /(?<word>\w+) (?<num>\d+)/g;
const text = 'item 1, thing 2';
for (const match of text.matchAll(pattern)) {
    console.log(match.groups.word, match.groups.num);
    // "item" "1", "thing" "2"
}

// search - find position
str.search(/brown/); // 10
str.search(/cat/); // -1
str.search(/THE/i); // 0 (case-insensitive)

// replace - string or regexp
str.replace('dog', 'cat');
// "The quick brown fox jumps over the lazy cat"

str.replace(/the/gi, 'a');
// "a quick brown fox jumps over a lazy dog"

// replace with function
str.replace(/\b\w{4}\b/g, match => match.toUpperCase());
// "The QUICK brown fox JUMPS OVER the LAZY dog"

// replace with capture groups
'John Smith'.replace(/(\w+) (\w+)/, '$2, $1');
// "Smith, John"

// replace with named groups
'2025-12-17'.replace(
    /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/,
    '$<month>/$<day>/$<year>'
); // "12/17/2025"

// replaceAll - all occurrences
'aaa'.replace('a', 'b'); // "baa"
'aaa'.replaceAll('a', 'b'); // "bbb"

'a-b-c'.replaceAll('-', '_'); // "a_b_c"

// split by regexp
'a1b2c3'.split(/\d/); // ["a", "b", "c", ""]
'one,two;three:four'.split(/[,;:]/);
// ["one", "two", "three", "four"]

// split with limit
'a-b-c-d'.split('-', 2); // ["a", "b"]

// includes, startsWith, endsWith (no regexp!)
str.includes('fox'); // true
str.includes('cat'); // false

str.startsWith('The'); // true
str.startsWith('the'); // false (case-sensitive)

str.endsWith('dog'); // true
str.endsWith('cat'); // false

// indexOf, lastIndexOf
str.indexOf('o'); // 12 (first 'o')
str.lastIndexOf('o'); // 41 (last 'o')

str.indexOf('the'); // -1 (case-sensitive)
str.toLowerCase().indexOf('the'); // 0

// Check from position
str.startsWith('quick', 4); // true (at index 4)
str.includes('fox', 20); // false (search starts at 20)

// Case-insensitive search
const lower = str.toLowerCase();
lower.includes('THE'.toLowerCase()); // true

// Or use regexp with /i
/THE/i.test(str); // true
        
#x3C;month>/

          
const str = 'The quick brown fox jumps over the lazy dog';

// match - without /g (first match with details)
str.match(/quick/);
// ["quick", index: 4, input: "...", groups: undefined]

str.match(/(\w+) (\w+)/);
// ["The quick", "The", "quick", index: 0, ...]

// match - with /g (all matches, no details)
str.match(/\w+/g);
// ["The", "quick", "brown", "fox", ...]

str.match(/o/g); // ["o", "o", "o", "o"]

// matchAll - all matches with details
const regex = /t(\w+)/gi;
const matches = [...str.matchAll(regex)];
matches[0]; // ["The", "he", index: 0, ...]
matches[1]; // ["the", "he", index: 31, ...]

// matchAll with named groups
const pattern = /(?<word>\w+) (?<num>\d+)/g;
const text = 'item 1, thing 2';
for (const match of text.matchAll(pattern)) {
    console.log(match.groups.word, match.groups.num);
    // "item" "1", "thing" "2"
}

// search - find position
str.search(/brown/); // 10
str.search(/cat/); // -1
str.search(/THE/i); // 0 (case-insensitive)

// replace - string or regexp
str.replace('dog', 'cat');
// "The quick brown fox jumps over the lazy cat"

str.replace(/the/gi, 'a');
// "a quick brown fox jumps over a lazy dog"

// replace with function
str.replace(/\b\w{4}\b/g, match => match.toUpperCase());
// "The QUICK brown fox JUMPS OVER the LAZY dog"

// replace with capture groups
'John Smith'.replace(/(\w+) (\w+)/, '$2, $1');
// "Smith, John"

// replace with named groups
'2025-12-17'.replace(
    /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/,
    '$<month>/$<day>/$<year>'
); // "12/17/2025"

// replaceAll - all occurrences
'aaa'.replace('a', 'b'); // "baa"
'aaa'.replaceAll('a', 'b'); // "bbb"

'a-b-c'.replaceAll('-', '_'); // "a_b_c"

// split by regexp
'a1b2c3'.split(/\d/); // ["a", "b", "c", ""]
'one,two;three:four'.split(/[,;:]/);
// ["one", "two", "three", "four"]

// split with limit
'a-b-c-d'.split('-', 2); // ["a", "b"]

// includes, startsWith, endsWith (no regexp!)
str.includes('fox'); // true
str.includes('cat'); // false

str.startsWith('The'); // true
str.startsWith('the'); // false (case-sensitive)

str.endsWith('dog'); // true
str.endsWith('cat'); // false

// indexOf, lastIndexOf
str.indexOf('o'); // 12 (first 'o')
str.lastIndexOf('o'); // 41 (last 'o')

str.indexOf('the'); // -1 (case-sensitive)
str.toLowerCase().indexOf('the'); // 0

// Check from position
str.startsWith('quick', 4); // true (at index 4)
str.includes('fox', 20); // false (search starts at 20)

// Case-insensitive search
const lower = str.toLowerCase();
lower.includes('THE'.toLowerCase()); // true

// Or use regexp with /i
/THE/i.test(str); // true
        
#x3C;day>/

          
const str = 'The quick brown fox jumps over the lazy dog';

// match - without /g (first match with details)
str.match(/quick/);
// ["quick", index: 4, input: "...", groups: undefined]

str.match(/(\w+) (\w+)/);
// ["The quick", "The", "quick", index: 0, ...]

// match - with /g (all matches, no details)
str.match(/\w+/g);
// ["The", "quick", "brown", "fox", ...]

str.match(/o/g); // ["o", "o", "o", "o"]

// matchAll - all matches with details
const regex = /t(\w+)/gi;
const matches = [...str.matchAll(regex)];
matches[0]; // ["The", "he", index: 0, ...]
matches[1]; // ["the", "he", index: 31, ...]

// matchAll with named groups
const pattern = /(?<word>\w+) (?<num>\d+)/g;
const text = 'item 1, thing 2';
for (const match of text.matchAll(pattern)) {
    console.log(match.groups.word, match.groups.num);
    // "item" "1", "thing" "2"
}

// search - find position
str.search(/brown/); // 10
str.search(/cat/); // -1
str.search(/THE/i); // 0 (case-insensitive)

// replace - string or regexp
str.replace('dog', 'cat');
// "The quick brown fox jumps over the lazy cat"

str.replace(/the/gi, 'a');
// "a quick brown fox jumps over a lazy dog"

// replace with function
str.replace(/\b\w{4}\b/g, match => match.toUpperCase());
// "The QUICK brown fox JUMPS OVER the LAZY dog"

// replace with capture groups
'John Smith'.replace(/(\w+) (\w+)/, '$2, $1');
// "Smith, John"

// replace with named groups
'2025-12-17'.replace(
    /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/,
    '$<month>/$<day>/$<year>'
); // "12/17/2025"

// replaceAll - all occurrences
'aaa'.replace('a', 'b'); // "baa"
'aaa'.replaceAll('a', 'b'); // "bbb"

'a-b-c'.replaceAll('-', '_'); // "a_b_c"

// split by regexp
'a1b2c3'.split(/\d/); // ["a", "b", "c", ""]
'one,two;three:four'.split(/[,;:]/);
// ["one", "two", "three", "four"]

// split with limit
'a-b-c-d'.split('-', 2); // ["a", "b"]

// includes, startsWith, endsWith (no regexp!)
str.includes('fox'); // true
str.includes('cat'); // false

str.startsWith('The'); // true
str.startsWith('the'); // false (case-sensitive)

str.endsWith('dog'); // true
str.endsWith('cat'); // false

// indexOf, lastIndexOf
str.indexOf('o'); // 12 (first 'o')
str.lastIndexOf('o'); // 41 (last 'o')

str.indexOf('the'); // -1 (case-sensitive)
str.toLowerCase().indexOf('the'); // 0

// Check from position
str.startsWith('quick', 4); // true (at index 4)
str.includes('fox', 20); // false (search starts at 20)

// Case-insensitive search
const lower = str.toLowerCase();
lower.includes('THE'.toLowerCase()); // true

// Or use regexp with /i
/THE/i.test(str); // true
        
#x3C;year>'
); // "12/17/2025"

// replaceAll - all occurrences
'aaa'.replace('a', 'b'); // "baa"
'aaa'.replaceAll('a', 'b'); // "bbb"

'a-b-c'.replaceAll('-', '_'); // "a_b_c"

// split by regexp
'a1b2c3'.split(/\d/); // ["a", "b", "c", ""]
'one,two;three:four'.split(/[,;:]/);
// ["one", "two", "three", "four"]

// split with limit
'a-b-c-d'.split('-', 2); // ["a", "b"]

// includes, startsWith, endsWith (no regexp!)
str.includes('fox'); // true
str.includes('cat'); // false

str.startsWith('The'); // true
str.startsWith('the'); // false (case-sensitive)

str.endsWith('dog'); // true
str.endsWith('cat'); // false

// indexOf, lastIndexOf
str.indexOf('o'); // 12 (first 'o')
str.lastIndexOf('o'); // 41 (last 'o')

str.indexOf('the'); // -1 (case-sensitive)
str.toLowerCase().indexOf('the'); // 0

// Check from position
str.startsWith('quick', 4); // true (at index 4)
str.includes('fox', 20); // false (search starts at 20)

// Case-insensitive search
const lower = str.toLowerCase();
lower.includes('THE'.toLowerCase()); // true

// Or use regexp with /i
/THE/i.test(str); // true