Skip to main content

How to Get the First Character of a String in JavaScript

Getting the first character of a string is a fundamental operation, essential for tasks like checking for a prefix, getting a user's initial, or parsing data. Modern JavaScript provides a few simple and direct ways to accomplish this.

This guide will teach you the two standard, modern methods for accessing the first character of a string: the simple and common bracket notation (str[0]) and the newer, more flexible at() method.

The Core Method (Most Common): Bracket Notation (str[0])​

For most use cases, the simplest and most readable way to get the first character is to treat the string like an array and access the character at index 0.

For example, we want to get the first letter from a string.

// Problem: How to get the "H" from this string?
const myString = 'Hello, World!';

This solution is the idiomatic and most common way to get the first character in modern JavaScript.

const myString = 'Hello, World!';

const firstChar = myString[0];

console.log(firstChar); // Output: "H"
note

Behavior on Empty Strings: One important behavior to note is that if the string is empty, this method will return undefined.

const emptyString = '';
console.log(emptyString[0]); // Output: undefined

The Modern Alternative: The at() Method​

The String.prototype.at() method is a newer addition to JavaScript that provides a more flexible way to access characters. While it can also get the first character, its main advantage is the ability to use negative indexes to access characters from the end of the string.

const myString = 'Hello, World!';

// Get the first character
const firstChar = myString.at(0);
console.log(firstChar); // Output: "H"

// The main advantage: get the last character easily
const lastChar = myString.at(-1);
console.log(lastChar);  // Output: "!"

Like bracket notation, at() also returns undefined for an empty string. The choice between str[0] and str.at(0) for getting the first character is purely a matter of style, as they achieve the same result.

A Note on Older Methods (charAt, slice, substring)​

You may see older code using methods like charAt(0), slice(0, 1), or substring(0, 1).

  • charAt(0): This method is very similar to str[0], but with one key difference: it returns an empty string ('') for an out-of-bounds index, whereas str[0] returns undefined.
  • slice(0, 1) / substring(0, 1): These methods are overly verbose for getting a single character and are better suited for extracting longer substrings.

For modern JavaScript, bracket notation (str[0]) is generally preferred over these older methods for its conciseness and consistency with array access.

Handling Unicode and Emojis​

A critical edge case in string manipulation is handling characters that are represented by more than one code point, such as complex emojis. All the methods mentioned above operate on UTF-16 code units, not on the visible "characters."

const emojiString = '🐴horse';

// These methods will fail to get the full emoji character.
console.log(emojiString[0]); // Output: (a single surrogate pair character, not '🐴')

To correctly handle complex characters, you must first convert the string into an array of its "real" characters using the spread syntax (...) or Array.from().

const emojiString = '🐴horse';

// Convert the string into an array of its graphemes (visible characters)
const charArray = [...emojiString];

// Now, get the first element of the array
const firstChar = charArray[0];

console.log(firstChar); // Output: "🐴"

This is the only robust solution for working with strings that may contain complex Unicode characters.

Conclusion​

Getting the first character of a string is a simple task in modern JavaScript.

  • The most common and recommended method is bracket notation (str[0]) for its simplicity and readability.
  • The .at(0) method is an excellent modern alternative that offers the added flexibility of negative indexing.
  • For strings that may contain emojis or other complex Unicode characters, the only robust solution is to first convert the string to an array ([...str]) and then access the first element.

Table of Contents