Skip to main content

How to Get the First N Characters of a String in JavaScript

Extracting the beginning of a string is a very common task, essential for creating summaries, truncating long text for display, or getting a prefix from a filename. The modern and most idiomatic way to achieve this in JavaScript is with the String.prototype.slice() method.

This guide will teach you how to use slice() to get the first N characters of a string, explain how it differs from the similar substring() method, and show you why slice() is the recommended best practice.

The slice() method is the most direct and powerful tool for this job. It extracts a section of a string and returns it as a new string, without modifying the original.

To get the first N characters, you call slice() with a starting index of 0 and an ending index of N. The slice will include the character at the start index up to, but not including, the character at the end index.

Syntax: myString.slice(0, N)

For example, you have a long string and need to get the first 10 characters.

// Problem: How to get the first 10 characters?
const longText = 'This is a very long sentence.';

Solution:

const longText = 'This is a very long sentence.';
const N = 10;

const firstTenChars = longText.slice(0, N);

console.log(firstTenChars); // Output: "This is a "
note

If you provide a number larger than the string's length, slice() will safely stop at the end of the string without throwing an error.

An Alternative Method: String.prototype.substring()​

The substring() method is very similar to slice() and can be used in the same way for this specific task.

Solution:

const longText = 'This is a very long sentence.';
const N = 10;

const firstTenChars = longText.substring(0, N);

console.log(firstTenChars); // Output: "This is a "
note

While this works, substring() has some behavioral differences that make slice() the preferred method in modern JavaScript.

Why slice() is the Best Practice​

Although slice() and substring() seem interchangeable for this simple task, they behave differently in other scenarios, and slice() is generally more intuitive and powerful.

  • Negative Indexes: slice() accepts negative indexes, which count from the end of the string. substring() treats negative indexes as 0. 
    'hello'.slice(-2);        // Returns 'lo'
    'hello'.substring(-2);    // Returns 'hello'
  • Swapped Indexes: If the start index is greater than the end index, slice() returns an empty string, which is logical. substring() will swap the two arguments. 
    'hello'.slice(3, 0);      // Returns ''
    'hello'.substring(3, 0);  // Returns 'hel' (same as substring(0, 3))

Because its behavior is more predictable and consistent, slice() is the recommended best practice for all substring operations.

Practical Example: Truncating a Text Preview​

A perfect use case for slice() is to create a short preview of a longer piece of text, adding an ellipsis (...) at the end.

function truncate(str, maxLength) {
  if (str.length <= maxLength) {
    return str;
  }
  
  // Get the first `maxLength` characters and add an ellipsis
  return str.slice(0, maxLength) + '...';
}

// Example Usage:
const longPost = 'This is a long blog post about JavaScript performance and best practices.';

const preview = truncate(longPost, 30);

console.log(preview);
// Output: "This is a long blog post abou..."

Conclusion​

For getting the first N characters of a string, the String.prototype.slice() method is the definitive best practice.

  • The syntax is clean and direct: myString.slice(0, N).
  • It is the most predictable and powerful substring method in JavaScript, especially when compared to substring().
  • It safely handles cases where N is larger than the string's length.

By using slice(), you can write clean, readable, and robust code for any string truncation or extraction task.

Table of Contents