Introduction

JavaScript offers both String.prototype.slice and String.prototype.substring for extracting part of a string. They look similar in simple cases, so teams often treat them as interchangeable. The important differences appear when indexes are negative, out of order, or derived from uncertain user input.

Shared Basics

Both methods return a new string and do not mutate the original value. Both use a start index and an optional end index, with the end being exclusive.

1const text = "Hello, world";
2
3console.log(text.slice(0, 5));      // Hello
4console.log(text.substring(0, 5));  // Hello
5console.log(text);                  // Hello, world

In straightforward index ranges, outputs are identical. Problems begin when indexes are less predictable.

How slice Handles Indexes

slice(start, end) supports negative indexes. A negative number means count from the end of the string.

1const s = "report-2026.csv";
2
3console.log(s.slice(-4));     // .csv
4console.log(s.slice(0, -4));  // report-2026
5console.log(s.slice(-8, -4)); // 2026

This behavior is often exactly what you want when parsing suffixes, file extensions, or fixed-width trailers.

If start is greater than end, slice returns an empty string.

const s = "abcdef";
console.log(s.slice(4, 2)); // ""

That strict behavior is useful when you want invalid ranges to fail quietly and clearly.

How substring Handles Indexes

substring(start, end) does not support negative indexes in the same way. Negative values are treated as zero. Also, if start is greater than end, the method swaps them.

1const s = "abcdef";
2
3console.log(s.substring(-2, 3)); // abc
4console.log(s.substring(4, 2));  // cd

This normalization can be convenient, but it can also hide indexing mistakes in upstream logic. A bug in index calculation may still produce non-empty output, which makes troubleshooting harder.

substring is still valid and fully supported, but you should use it deliberately when you want this forgiving behavior.

Behavior Comparison in Practical Scenarios

A side-by-side example makes the differences obvious.

1const value = "token:ABC123";
2
3console.log(value.slice(-6));        // ABC123
4console.log(value.substring(-6));    // token:ABC123
5
6console.log(value.slice(8, 3));      // ""
7console.log(value.substring(8, 3));  // en:A

The slice results are strict and directional. The substring results are normalized, which may or may not match your intent.

Choosing the Right Method

For most modern codebases, slice is the safer default because it is predictable and works naturally with negative offsets.

Use slice when:

• you need negative indexing from the end
• you want strict range behavior
• you are writing parser-style logic where index order matters

Use substring when:

• you intentionally want index normalization
• input ranges are user-controlled and you prefer forgiving extraction
• you are maintaining older code that already relies on this behavior

A clean helper can make intent explicit and reduce repeated mistakes.

1function safeSegment(str, start, end) {
2  if (!Number.isInteger(start) || (end !== undefined && !Number.isInteger(end))) {
3    throw new TypeError("start and end must be integers");
4  }
5  return str.slice(start, end);
6}
7
8console.log(safeSegment("invoice-8842", -4)); // 8842

Related Note on substr

Some developers still mention substr(start, length). It is legacy and not recommended for new code. If you are writing modern JavaScript, pick slice or substring and keep behavior explicit.

const id = "user-9042";
console.log(id.slice(5)); // 9042

Common Pitfalls

• Assuming substring supports negative indexes like slice.
• Forgetting that substring swaps out-of-order arguments.
• Using substring in parser logic where strict directional ranges are required.
• Using mixed methods in one module, which increases cognitive load.
• Keeping legacy substr examples in new code and confusing future maintainers.

Summary

• Both methods return new strings and leave the original string unchanged.
• slice supports negative indexes and does not swap index order.
• substring treats negative values as zero and swaps out-of-order indexes.
• slice is usually the better default for modern, predictable code.
• Pick one method per code area and document the choice for consistency.