Strings in JavaScript: An In-Depth Guide

Strings are a fundamental part of programming in JavaScript, representing textual data. In this guide, we will explore the intricacies of…

Strings in JavaScript: An In-Depth Guide

Strings are a fundamental part of programming in JavaScript, representing textual data. In this guide, we will explore the intricacies of strings in JavaScript, including their creation, manipulation, and the top 50 methods you can use to handle them effectively.

Introduction to Strings

In JavaScript, a string is a sequence of characters used to represent text. They are immutable, meaning once created, their values cannot be changed.

String Creation

You can create strings in JavaScript using single quotes (`’`), double quotes (`”`), or backticks (`` ` ``) for template literals.

let singleQuote = ‘Hello, world!’;
let doubleQuote = “Hello, world!”;
let templateLiteral = `Hello, world!`;

String Properties

1. `length`
   The `length` property returns the number of characters in a string.

let text = “Hello”;
console.log(text.length); // Output: 5

2. `charAt()`
Returns the character at a specified index.

let text = “Hello”;
console.log(text.charAt(0)); // Output: H

3. `charCodeAt()`
Returns the Unicode of the character at a specified index.

let text = “Hello”;
console.log(text.charCodeAt(0)); // Output: 72

4. `concat()`
Joins two or more strings.

let text1 = “Hello”;
let text2 = “World”;
console.log(text1.concat(“ “, text2)); // Output: Hello World

5. `includes()`
Checks if a string contains a specified value.

let text = “Hello World”;
console.log(text.includes(“World”)); // Output: true

6. `endsWith()`
Checks if a string ends with a specified value.

let text = “Hello World”;
console.log(text.endsWith(“World”)); // Output: true

1. `indexOf()`
   Returns the index of the first occurrence of a specified value.

let text = “Hello World”;
console.log(text.indexOf(“World”)); // Output: 6

8. `lastIndexOf()`
Returns the index of the last occurrence of a specified value.

let text = “Hello World World”;
console.log(text.lastIndexOf(“World”)); // Output: 12

9. `match()`
Searches a string for a match against a regular expression.

let text = “Hello World”;
console.log(text.match(/World/)); // Output: [“World”]

10. `matchAll()`
Returns an iterator of all results matching a string against a regular expression.

let text = “test1test2”;
const matches = text.matchAll(/t(e)(st(\d?))/g);
for (const match of matches) {
console.log(match);
}
// Output:
// [“test1”, “e”, “st1”, “1”]
// [“test2”, “e”, “st2”, “2”]

11. `padEnd()`
Pads the current string with another string until the resulting string reaches the given length.

let text = “Hello”;
console.log(text.padEnd(10, “*”)); // Output: Hello*****

12. `padStart()`
Pads the current string with another string until the resulting string reaches the given length.

let text = “Hello”;
console.log(text.padStart(10, “*”)); // Output: *****Hello

13. `repeat()`
Returns a new string with a specified number of copies of an existing string.

let text = “Hello”;
console.log(text.repeat(3)); // Output: HelloHelloHello

14. `replace()`
Searches for a match between a regular expression and a string, and replaces the matched substring with a new substring.

let text = “Hello World”;
console.log(text.replace(“World”, “Everyone”)); // Output: Hello Everyone

15. `replaceAll()`
Returns a new string with all matches of a pattern replaced by a replacement.

let text = “Hello World World”;
console.log(text.replaceAll(“World”, “Everyone”)); // Output: Hello Everyone Everyone

1. `search()`
   Executes a search for a match between a regular expression and a specified string.

let text = “Hello World”;
console.log(text.search(“World”)); // Output: 6

17. `slice()`
Extracts a section of a string and returns it as a new string.

let text = “Hello World”;
console.log(text.slice(0, 5)); // Output: Hello

18. `split()`
Splits a string into an array of substrings.

let text = “Hello World”;
console.log(text.split(“ “)); // Output: [“Hello”, “World”]

19. `startsWith()`
Checks if a string starts with a specified value.

let text = “Hello World”;
console.log(text.startsWith(“Hello”)); // Output: true

20. `substring()`
Returns a subset of a string between one index and another.

let text = “Hello World”;
console.log(text.substring(0, 5)); // Output: Hello

21. `toLowerCase()`
Converts a string to lowercase letters.

let text = “Hello World”;
console.log(text.toLowerCase()); // Output: hello world

1. `toUpperCase()`
   Converts a string to uppercase letters.

let text = “Hello World”;
console.log(text.toUpperCase()); // Output: HELLO WORLD

1. `trim()`
   Removes whitespace from both ends of a string.

let text = “ Hello World “;
console.log(text.trim()); // Output: Hello World

24. `trimEnd()`
Removes whitespace from the end of a string.

let text = “ Hello World “;
console.log(text.trimEnd()); // Output: “ Hello World”

25. `trimStart()`

Removes whitespace from the start of a string.

let text = “ Hello World “;
console.log(text.trimStart()); // Output: “Hello World “

26. `valueOf()`
Returns the primitive value of a string object.

let text = new String(“Hello World”);
console.log(text.valueOf()); // Output: “Hello World”

27. `codePointAt()`
Returns a non-negative integer that is the Unicode code point value.

let text = “Hello”;
console.log(text.codePointAt(0)); // Output: 72

28. `fromCharCode()`
Creates a string from the specified sequence of UTF-16 code units.

console.log(String.fromCharCode(72, 101, 108, 108, 111)); // Output: “Hello”

29. `fromCodePoint()`
Creates a string from the specified sequence of code points.

console.log(String.fromCodePoint(128512)); // Output: “😀”

30. `raw()`
Returns a raw string from a template string.

console.log(String.raw`Hello\nWorld`); // Output: “Hello\\nWorld”

31. `localeCompare()`
Compares two strings in the current locale.

let text1 = “a”;
let text2 = “b”;
console.log(text1.localeCompare(text2)); // Output: -1

1. `normalize()`
   Returns the Unicode Normalization Form of the string.

let text = “\u004F\u030C”;
console.log(text.normalize()); // Output: “Ǒ”

1. `toString()`
   Returns a string representing the specified object.

let text = new String(“Hello”);
console.log(text.toString()); // Output: “Hello”

34. `toLocaleLowerCase()`
Converts a string to lowercase letters, according to the host’s current locale.

let text = “Hello World”;
console.log(text.toLocaleLowerCase()); // Output: hello world

35. `toLocaleUpperCase()`
Converts a string to uppercase letters, according to the host’s current locale.

let text = “Hello World”;
console.log(text.toLocaleUpperCase()); // Output: HELLO WORLD

36. **`anchor()`
**Creates an HTML anchor.

let text = “Hello”;
console.log(text.anchor(“myanchor”)); // Output: <a name=”myanchor”>Hello</a>

37. `big()`
Creates a string to be displayed in a big font.

let text = “Hello”;
console.log(text.big()); // Output: <big>Hello</big>

38. `blink()`
Creates a string to be displayed as blinking text.

let text = “Hello”;
console.log(text.blink()); // Output: <blink>Hello</blink>

39. `bold()`
Creates a string to be displayed as bold.

let text = “Hello”;
console.log(text.bold()); // Output: <b>Hello</b>

40. `fixed()`
Creates a string to be displayed in a fixed-pitch font.

let text = “Hello”;
console.log(text.fixed()); // Output: <tt>Hello</tt>

41. `fontcolor()`
Creates a string to be displayed in a specified color.

let text = “Hello”;
console.log(text.fontcolor(“red”)); // Output: <font color=”red”>Hello</font>

42. `fontsize()`
Creates a string to be displayed in a specified size.

let text = “Hello”;
console.log(text.fontsize(7)); // Output: <font size=”7">Hello</font>

43. `italics()`
Creates a string to be displayed as italic.

let text = “Hello”;
console.log(text.italics()); // Output: <i>Hello</i>

44. `link()`
Creates a string to be displayed as a hyperlink.

let text = “Hello”;
console.log(text.link(“https://www.example.com")); // Output: <a href=”https://www.example.com"\>Hello</a>

45. `small()`
Creates a string to be displayed in a small font.

let text = “Hello”;
console.log(text.small()); // Output: <small>Hello</small>

46. `strike()`
Creates a string to be displayed with a strikethrough.

let text = “Hello”;
console.log(text.strike()); // Output: <strike>Hello</strike>

47. `sub()`
Creates a string to be displayed as subscript.

let text = “Hello”;
console.log(text.sub()); // Output: _Hello

48. `sup()`
Creates a string to be displayed as superscript.

let text = “Hello”;
console.log(text.sup()); // Output: ^Hello

1. `trimLeft()`
   Removes whitespace from the start of a string.

let text = “ Hello World “;
console.log(text.trimLeft()); // Output: “Hello World “

50. `trimRight()`
Removes whitespace from the end of a string.

let text = “ Hello World “;
console.log(text.trimRight()); // Output: “ Hello World”

Conclusion

Strings are an essential part of JavaScript, and knowing how to manipulate them effectively is crucial for any developer. This guide covered the basics of strings and provided a comprehensive list of methods to work with them. Whether you’re searching, replacing, or formatting text, these methods will help you handle strings efficiently in your JavaScript projects.

By Jatin Jain Saraf on June 21, 2024.