Understanding JavaScript split() Method and Common Pitfalls

Requirement Overview

Hello everyone, I am Shi Xiaoshi. A few days ago I implemented a feature that extracts image keys from the backend "images" field, splits the comma‑separated string, and renders the images.

According to the backend "images" field, extract the image "key" and render the image link.

Because the backend returns a comma‑separated string, using the split method to obtain the keys is very convenient.

if (data.images != null || data.images != undefined) {
  // Split the string into an array
  const picKeyList = data.images.split(",");

  picKeyList.forEach(key => {
    // Query the image link by key
    // ...
  });
}

At first glance the code seemed fine and passed QA testing, so we pushed it to production that night.

Production Incident

A few days later, while I was sleeping, I received an urgent call that the page I developed showed a white screen after loading images. I rushed to debug.

During debugging I found that when the backend returned data.images as an empty string "", splitting it produced [""] , so the key in the loop was empty and caused a runtime error.

I verified in the console that splitting an empty string returns an array containing a single empty string, which was the root cause of the bug.

In hindsight, I should have fully understood the behavior of split .

split() Method

After the incident I decided to review the usage of the split() method and summarize its common pitfalls and possible solutions.

Syntax

split() splits a string into an array based on a specified separator.

string.split(separator, limit)

separator (optional): a string or regular expression used as the delimiter. If omitted, the entire string is returned as a single‑element array.

limit (optional): an integer that limits the maximum length of the returned array.

Basic Usage

Using a string as the separator:

const text = "Apple,Huawei,Xiaomi";
const result = text.split(",");
console.log(result); // ['Apple', 'Huawei', 'Xiaomi']

Using a regular expression as the separator:

const text = "Apple,Huawei,Xiaomi";
const result = text.split(/[,; ]+/); // matches commas, semicolons or spaces
console.log(result); // ['Apple', 'Huawei', 'Xiaomi']

Using the limit parameter:

const text = "Apple,Huawei,Xiaomi";
const result = text.split(",", 2);
console.log(result); // ['Apple', 'Huawei']

If the separator is not found:

const text = "hello";
const result = text.split(",");
console.log(result); // ['hello']

Common Pitfalls of split()

Splitting an Empty String

const result = "".split(",");
console.log(result); // [''] (non‑empty array containing an empty string)

Reason: Splitting an empty string still returns an array with the original (empty) string.

Solution:

const result = "".split(",").filter(Boolean);
console.log(result); // [] (filter removes the empty string)

Extra Separators

const text = ",,Apple,,Huawei,,";
const result = text.split(",");
console.log(result); // ['', '', 'Apple', '', 'Huawei', '', '']

Reason: Consecutive separators generate empty strings in the resulting array.

Solution:

const result = text.split(",").filter(Boolean);
console.log(result); // ['Apple', 'Huawei']

The filter(Boolean) pattern is a common technique to remove falsy values from an array.

Splitting Unicode Characters

const text = "👍😊👨‍👩‍👦";
const result = text.split('');
console.log(result); // ['👍', '😊', '👨', '‍', '👩', '‍', '👦']

Reason: split('') splits by code units, which cannot correctly handle combined Unicode characters.

Solution:

const result = Array.from(text);
console.log(result); // ['👍', '😊', '👨‍👩‍👦']

Conclusion

This article shares a real‑world production incident to illustrate subtle bugs that can arise when using split() , especially with empty strings, redundant delimiters, and Unicode data. Remember to guard against these cases—e.g., filter out empty strings—to avoid unexpected runtime errors.