1. String slice() Method
To get the first N characters of a string in JavaScript, call the slice() method on the string, passing 0 as the first argument and N as the second. For example, str.slice(0, 2) returns a new string containing the first 2 characters of str.
const str = 'Coding Beauty';
const first2 = str.slice(0, 2);
console.log(first2); // Co
const first6 = str.slice(0, 6);
console.log(first6); // Coding
const first8 = str.slice(0, 8);
console.log(first8); // Coding B
The String slice() method extracts the part of a string between the start and end indexes, which are specified by the first and second arguments respectively. The substring between the indexes 0 and N is a substring containing only the first N string characters.
Note
Strings in JavaScript are immutable, and the slice() method returns a new string without modifying the original:
const str = 'Coding Beauty';
const first2 = str.slice(0, 2);
console.log(first2); // Co
// Original not modified
console.log(str); // Coding Beauty
2. String substring() Method
To get the first N characters of a string, we can also call the substring() method on the string, passing 0 and N as the first and second arguments respectively. For example, str.substring(0, 3) returns a new string containing the first 3 characters of str.
const str = 'Coding Beauty';
const first3 = str.substring(0, 3);
console.log(first3); // Cod
const first5 = str.substring(0, 5);
console.log(first5); // Codin
const first11 = str.substring(0, 11);
console.log(first11); // Coding Beau
Like slice(), substring() returns the part of a string between the start and end indexes, which are specified by the first and second arguments respectively.
Note
substring() returns a new string without modifying the original:
const str = 'Coding Beauty';
const first3 = str.substring(0, 3);
console.log(first3); // Cod
// Original not modified
console.log(str); // Coding Beauty
Tip
The slice() and substring() methods work similarly for our scenario, but this isn’t always the case. Here’s one difference between them: substring() swaps its arguments if the first is greater than the second, but slice() returns an empty string (''):
const str = 'Coding Beauty';
const substr1 = str.substring(2, 0);
const substr2 = str.slice(2, 0);
// Equivalent to str.substring(0, 2)
console.log(substr1); // Co
console.log(substr2); // '' (empty string)Every Crazy Thing JavaScript Does
A captivating guide to the subtle caveats and lesser-known parts of JavaScript.
Ayibatari Ibaba is a software developer with years of experience building websites and apps. He has written extensively on a wide range of programming topics and has created dozens of apps and open-source libraries.
