10 great JavaScript string tricks

We call a sequence of characters a string. This is one of the basic types found in almost all programming languages.

Here we show you 10 great tips about JS strings.

1. How to duplicate a string multiple times

JS strings allow simple repetition. Unlike copying a string purely by hand, we can use the string REPEAT method.

const laughing = '小智'.repeat(3)
consol.log(laughing) // "小智小智小智"

const eightBits = '1'.repeat(8)
console.log(eightBits) // "11111111"

2. how to fill a string to the specified length

Sometimes we want the string to have a specific length. If the string is too short, the remaining space needs to be filled until the specified length is reached.

In the past, the library left-pad was mainly used, but today we can use the padStart and SpadEndmethods, and the choice depends on whether the string is filled at the beginning or the end of the string.

// 在开头添加 "0"，直到字符串的长度为 8。
const eightBits = '001'.padStart(8, '0')
console.log(eightBits) // "00000001"

//在末尾添加"*"，直到字符串的长度为5。
const anonymizedCode = "34".padEnd(5, "*")
console.log(anonymizedCode) // "34***"

3. How to split a string into an array of characters

There are several ways to split a string into an array of characters, I prefer to use the extension operator (…) .

1
2
3

const word = 'apple'
const characters = [...word]
console.log(characters) // ["a", "p", "p", "l", "e"]

Note that this does not always work as expected. For more information, see the next tip.

4. How to count the characters in a string

You can use the length property.

1
2

const word = "apple";
console.log(word.length) // 5

But for Chinese, this method is less reliable.

1
2

const word = "𩸽"
console.log(word.length) // 2

Japanese Kanji 𩸽returns length of 2. Why? JS represents most characters as 16-bit code points.

However, some characters are represented as two (or more) 16-bit code points, called proxy pairs. If the length attribute is used, JS tells you how many code points are being used. Thus, 𩸽 (hokke) consists of two code points and returns the wrong value.

So how do you go about determining this, using the deconstruct operation notation (…) .

1
2
3

const word = "𩸽"
const characters = [...word]
console.log(characters.length) // 1

This method works in most cases, but there are some extreme cases. For example, if emojis are used, then sometimes this length is also wrong. If you really want to calculate the correct length of a character, you must break the word into Grapheme Clusters, which is beyond the scope of this article and will not be described here.

5. How to invert the characters in a string

1
2
3

const word = "apple"
const reversedWord = [...word].reverse().join("")
console.log(reversedWord) // "elppa"

As before, there are some edge cases. When encountering edge cases it is necessary to first split the word into grapheme clusters.

6. How to capitalize the first letter in a string

A very common operation is to capitalize the first letter of a string. While many programming languages have a native way to do this, JS needs to do some work.

let word = 'apply'

word = word[0].toUpperCase() + word.substr(1)

console.log(word) // "Apple"

Another way:

// This shows an alternative way
let word = "apple";

// 使用扩展运算符（`...`）拆分为字符

const characters = [...word];
characters[0] = characters[0].toUpperCase();
word = characters.join("");

console.log(word); // "Apple"

7. How to split a string over multiple separators

Suppose we want to split strings on separators, the first thing that comes to mind is to use the split method, which you surely know. However, one thing you may not know is that split can split multiple delimiters at the same time, which can be achieved by using regular expressions.

// 用逗号(,)和分号(;)分开。

const list = "apples,bananas;cherries"
const fruits = list.split(/[,;]/)
console.log(fruits); // ["apples", "bananas", "cherries"]

8. How to check if a string contains a specific sequence

String searching is a common task. In JS, you can easily do this using the String.includes method. No regular expressions are required.

1
2

const text = "Hello, world! My name is Kai!"
console.log(text.includes("Kai")); // true

9. How to check if a string starts or ends with a specific sequence

To search at the beginning or end of a string, you can use the String.startsWith and String.endsWith methods.

const text = "Hello, world! My name is Kai!"

console.log(text.startsWith("Hello")); // true

console.log(text.endsWith("world")); // false

10. How to replace all occurrences of the string

There are multiple ways to replace all occurrences of a string. You can use the String.replace method and regular expressions with global flags. Or, you can use the new String.replaceAll method. Please note that this new method is not available in all browsers and Node.js versions.

const text = "I like apples. You like apples."

console.log(text.replace(/apples/g, "bananas"));
// "I like bananas. You like bananas."

console.log(text.replaceAll("apples", "bananas"));
// "I lik

Summary

The string is one of the most basic data types in almost any programming language. Also, it is one of the first data types that new developers learn. However, especially in JavaScript, many developers don’t know some interesting details about strings. We hope this article is helpful to you.

Table of Contents