ES6 - New String Methods

ES6 - New String Features

ECMAScript 2015 (ES6) and subsequent versions introduced several new methods and features for strings, making string manipulation more powerful and convenient.

New String Methods in ES6

Sr.No	Method & Description
1	String.prototype.startsWith(searchString, position?)
2	String.prototype.endsWith(searchString, length?)
3	String.prototype.includes(searchString, position?)
4	String.prototype.repeat(count)

Example of New Methods:

const message = "Hello, ES6 world!";

console.log(message.startsWith("Hello")); // true
console.log(message.startsWith("ES6", 7)); // true (starts searching from index 7)

console.log(message.endsWith("world!")); // true
console.log(message.endsWith("ES6", 10)); // true (considers string up to index 10: "Hello, ES6")

console.log(message.includes("ES6")); // true
console.log(message.includes("Python")); // false

const repeatedStars = "*".repeat(5);
console.log(repeatedStars); // "*****"

Template Literals (Template Strings)

Template literals are a powerful feature for string creation, enclosed by backticks (`) instead of single or double quotes. They offer several advantages:

• String Interpolation: Easily embed expressions (variables, function calls, etc.) within strings using the ${expression} syntax.
• Multiline Strings: Strings can span multiple lines without needing special characters like \n.

Example: Basic Template Literal

const greeting = `Hello World!`;
console.log(greeting); // "Hello World!"

Example: String Interpolation

const name = "Brendan";
console.log(`Hello, ${name}!`); // Output: Hello, Brendan!

const a = 10;
const b = 10;
console.log(`The sum of ${a} and ${b} is ${a + b}.`); // Output: The sum of 10 and 10 is 20.

function getFramework() {
  return "React";
}
console.log(`Current framework: ${getFramework()}!`); // Output: Current framework: React!

Example: Multiline Strings

const multiLineString = `This is
a string
with multiple
lines.`;
console.log(multiLineString);
// Output:
// This is
// a string
// with multiple
// lines.

Tagged Templates

Template literals can be prefixed with a function name (a “tag”). The tag function processes the template literal, receiving the string parts and the evaluated expressions as arguments. This allows for advanced string manipulation and construction.

String.raw

String.raw is a built-in tag function that allows you to get the raw string form of a template literal, meaning backslashes (\) do not have special meaning (e.g., \n is treated as the two characters \ and n, not as a newline).

Example: String.raw

C:\Development\profile\settings.json

const filePath = `C:\Development\profile\settings.json`;
console.log(filePath);
// Output (interpreted escapes):
const rawFilePath = String.raw`C:\Development\profile\settings.json`;
console.log(rawFilePath);
// Output (raw string):
// C:\Development\profile\settings.json

Static String Methods

String.fromCodePoint(...codePoints)

The static String.fromCodePoint() method returns a string created by using the specified sequence of Unicode code points. This is useful for creating strings from characters that are outside the Basic Multilingual Plane (BMP), which might require two UTF-16 code units (a surrogate pair).

Example: String.fromCodePoint

console.log(String.fromCodePoint(42)); // "*"
console.log(String.fromCodePoint(65, 90)); // "AZ"
console.log(String.fromCodePoint(0x2F804)); // A CJK character: "你" (U+2F804)
// For comparison, String.fromCharCode() would fail with values > 0xFFFF
// console.log(String.fromCharCode(0x2F804)); // Incorrect output or error

These new features significantly enhance the way developers can work with strings in JavaScript, leading to more readable and expressive code.

Additional Resources:

• Template Literals (MDN): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
• ES6 String Methods (MDN): Refer to individual method pages under https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String