Get the First Character of a String in JavaScript

To get the first character of a string in JavaScript, use str[0] for the modern style or str.charAt(0) when you want explicit “empty string when there’s nothing there” behavior. str.at(0) works on every modern browser too and supports negative indices.

Contents

Every approach in one block
Empty-string behavior differs
Checking the first character
Heads-up: emoji and surrogates
Frequently asked questions
Related guides
References

Last verified: 2026-05-17 on modern browsers and Node 20+. Originally published 2022-10-19, rewritten and updated 2026-05-17.

Every approach in one block

const str = "hello world";

str[0];               // "h"   bracket notation (modern, terse)
str.at(0);            // "h"   modern (also supports negative indices)
str.charAt(0);        // "h"   classic, never throws
str.slice(0, 1);      // "h"   returns a 1-char substring
str.substring(0, 1);  // "h"   same as slice for non-negative args
str.substr(0, 1);     // "h"   legacy (deprecated, but works)

JS first character — bracket, at, charAt, slice, substring compared with empty string behavior

Empty-string behavior differs

const empty = "";

empty[0];               // undefined
empty.at(0);            // undefined
empty.charAt(0);        // ""
empty.slice(0, 1);      // ""
empty.substring(0, 1);  // ""
empty.substr(0, 1);     // ""

The bracket-notation and .at() methods return undefined — usually what you want, because falsy-checking undefined is clearer than checking for an empty string. The older methods return "", which both pass the “is it falsy?” test and silently chain through further string operations without raising.

Checking the first character

const v = document.querySelector('input').value;

// Is the first character a digit?
if (v[0] >= '0' && v[0] <= '9') { /* ... */ }

// Or using startsWith for a cleaner test
if (v.startsWith('@')) { /* mention syntax */ }

For “does the string start with X?” prefer str.startsWith('x') — it reads naturally and handles multi-character prefixes for free.

Heads-up: emoji and surrogates

const flag = "🇺🇸 USA";
flag[0];           // "\uD83C"  (broken half of the emoji)

// Iterate code points instead
[...flag][0];      // "🇺" or similar — still one code point, not the whole flag

// Grapheme-aware (recognises 🇺🇸 as one cluster)
const seg = new Intl.Segmenter('en', { granularity: 'grapheme' });
[...seg.segment(flag)][0].segment;   // "🇺🇸"

JavaScript strings are UTF-16, so any single emoji is two code units. str[0] returns one of those halves — a “lone surrogate” that doesn’t render. Use the spread iterator for code-point granularity, or Intl.Segmenter for true user-perceived characters (graphemes).

Frequently asked questions

Which method is fastest?

All of them are O(1) — they look up the first code unit. Performance differences are negligible. Pick by readability: str[0] is the shortest; str.charAt(0) is the most self-documenting; str.at(0) is the modern choice. Don’t optimise for speed here.

Why do str[0] and str.at(0) return undefined on an empty string, but charAt returns ''?

charAt and its older siblings (slice, substring, substr) treat out-of-range indices as the empty string. str[0] is bracket notation that returns undefined for missing keys (same as any object). str.at(0) follows the bracket-notation convention. The undefined behavior is usually more useful — empty-string returns can hide bugs.

What about emoji and non-Latin characters?

All of these methods return one UTF-16 code unit, not necessarily one user-visible character. An emoji like 😀 is two code units, so '😀'[0] returns half of it (a lone surrogate that won’t render). For grapheme-aware first-character extraction, use the Intl Segmenter: new Intl.Segmenter().segment(str)[Symbol.iterator]().next().value.segment — verbose but correct.

What does String.raw have to do with this?

Nothing — but people often confuse it with str.at(). String.raw is a template tag that returns the raw string without processing escape sequences. Different feature entirely; mentioned only because both arrived in modern JS and search results sometimes conflate them.