String Methods in ES6

JavaScript strings are based on UTF-16 encoding, where each code unit occupies 2 bytes. Characters within the Basic Multilingual Plane (U+0000 to U+FFFF) fit in one code unit, while supplementary characters require two.

charAt and charCodeAt

charCodeAt returns the UTF-16 code unit at a given index, while charAt returns the actual character:

const text = 'hello';
console.log(text.charCodeAt(0)); // 104
console.log(text.charAt(1));     // 'e'

includes, startsWith, endsWith

These methods provide cleaner alternatives to indexOf for substring checks:

const phrase = 'JavaScript is awesome';

console.log(phrase.includes('Script'));        // true
console.log(phrase.startsWith('Java'));       // true
console.log(phrase.endsWith('some'));         // true

// With position parameter
console.log(phrase.startsWith('Script', 4));  // true
console.log(phrase.endsWith('Java', 4));      // true

Note: endsWith’s second argument specifies the end position (length), not a starting index.

repeat

The repeat method duplicates a string a specified number of times:

console.log('x'.repeat(3));      // 'xxx'
console.log('x'.repeat(0));      // ''
console.log('x'.repeat(2.9));    // 'xx' (floor applied)

// Invalid cases
console.log('x'.repeat(-0.5));   // '' (treated as 0)
// 'x'.repeat(-1);               // Throws RangeError
// 'x'.repeat(Infinity);         // Throws RangeError

padStart and padEnd

These methods pad strings to a target length, commonly used for formatting:

const id = '7';
console.log(id.padStart(4, '0'));  // '0007'
console.log(id.padEnd(4, '0'));    // '7000'

The first argument is the target length; the second is the padding string (truncated if too long).

Template Literals

Template literals (delimited by backticks) enible embedded expressions and multi-line strings:

const user = 'Alice';
const score = 95;

// Expression interpolation
const message = `Hello ${user}, your score is ${score}.`;
console.log(message); // "Hello Alice, your score is 95."

// Multi-line support
const bio = `Name: ${user}
Score: ${score}`;
console.log(bio);
/* Output:
Name: Alice
Score: 95
*/

Expressions inside ${} can include arithmetic, object properties, or function calls:

const data = { x: 10, y: 20 };
const result = `Sum: ${data.x + data.y}, Double: ${(() => data.x * 2)()}`;
// "Sum: 30, Double: 20"

Tagged Templates

Tagged templates allow parsing template literals with a custom function:

function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) => 
    acc + str + (values[i] ? `<mark>${values[i]}</mark>` : ''), '');
}

const name = 'Bob';
const output = highlight`User: ${name}, Status: active`;
// "User: <mark>Bob</mark>, Status: active"

The tag function receives:

• strings: Array of static string parts (including a .raw property with unprocessed escapes)
• ...values: Evaluated expressions from placeholders

String.raw

This static method prevents escape sequence processing:

const path = String.raw`C:\dev\project\node_modules`;
console.log(path); // "C:\dev\project\node_modules" (no newline)

// Equivalent manual escaping:
// const path = 'C:\\dev\\project\\node_modules';

Useful for file paths, regular expressions, or any context where literal backslashes are needed.