Introduction
The slice() method in JavaScript is one of the most commonly used string methods. It allows developers to extract a portion of a string without changing the original string.
The slice() method is widely used in form validation, displaying shortened text, extracting file extensions, URL processing, and many real-world applications.
What is the JavaScript slice() Method?
The JavaScript slice() method extracts a section of a string and returns it as a new string.
It does not modify the original string.
Syntax of slice()
string.slice(startIndex, endIndex)
Explanation:
slice() accepts two parameters.
- startIndex: Starting position ( where extraction starts).
- endIndex: Ending position (where extraction stops).
Basic Examples of slice()
You will see some basic examples of the slice() method.
Example 1: Extract Beginning Characters
let text = "JavaScript";
console.log(text.slice(0,4));
Output:
Example 2: Extract From Middle
let text = "JavaScript";
console.log(text.slice(4,10));
Output:
Example 3: Extract Until End
let text = "Programming";
console.log(text.slice(3));
Output:
Using Negative Indexes in slice()
slice() supports negative values. Negative indexes count from the end.
Example:
let text = "JavaScript";
console.log(text.slice(-6));
Output:
Explanation:
- -1 → t
- -2 → p
- -3 → i
Extract Last Characters
Example:
let word = "Developer";
console.log(word.slice(-3));
Output:
slice() Without endIndex
If the end index is omitted, extraction continues to the end.
Example:
let text = "JavaScript";
console.log(text.slice(4));
Output:
Real-Life Example 1: Short Description Preview
E-commerce websites often show short product descriptions.
Example:
let description = "Learn JavaScript with practical examples";
let preview = description.slice(0,20);
console.log(preview + "...");
Output:
Real-Life Example 2: Hide Mobile Number
Show only the last four digits of the Mobile Number
let mobile = "9876543210";
let result = mobile.slice(-4);
console.log(result);
Output:
Real-Life Example 3: Username Display
Suppose you have a username john_taylor_123
We will show john..
let username = "john_taylor_123";
console.log(username.slice(0,4) +"...");
Output:
Common Mistakes in slice()
There are many common mistakes in slice()
Mistake 1: Expecting Original String to Change
Wrong expectation:
let text = "Hello";
text.slice(0,2);
console.log(text);
Output:
Correct Way:
let text = "Hello";
let newText = text.slice(0,2);
console.log(newText);
Output:
Mistake 2: Confusing endIndex
Wrong:
let text = "JavaScript";
let newText = text.slice(0,4);
console.log(newText);
Expected:
Output:
Note: The ending index is excluded.
Difference Between slice() and split()
| Feature | slice() | split() |
|---|---|---|
| Return Type | String | Array |
| Purpose | Extract part of a string | Divide string into parts |
| Syntax | string.slice(start, end) |
string.split(separator) |
| Example Code |
let text = "JavaScript";
|
let text = "HTML,CSS,JS";
|
Interview Questions on JavaScript slice()
Conclusion
The JavaScript slice() method is an essential string method used to extract parts of strings without modifying the original value. It is widely used in text processing, previews, file handling, form validation, and web applications.
The biggest advantage of slice() is support for negative indexes, making it easier to extract characters from the end of strings.