5 Ways to Get the First Character of a String in JavaScript

In this article, we’ll be looking at multiple ways to easily get the first character of a string in JavaScript.

1. String charAt() method

To get the first character of a string, we can call charAt() on the string, passing 0 as an argument. For example, str.charAt(0) returns the first character of str.

JavaScriptCopied!

const str = 'Coding Beauty';

const firstChar = str.charAt(0);
console.log(firstChar); // C

The String charAt() method returns the character of a string at the specified index. The index of the first character is 0.

2. Bracket ([]) notation property access

Alternatively, to get the first character of a string, we can access the 0 property of the string using the bracket notation ([]):

JavaScriptCopied!

const str = 'Coding Beauty';

const firstChar = str['0'];
console.log(firstChar); // C

Bracket notation property access is a useful alternative to dot notation when the property name is an invalid JavaScript identifier. For example, attempting to access the 0 property with dot notation will result in a syntax error, as 0 is not a valid identifier:

JavaScriptCopied!

const str = 'Coding Beauty';

// SyntaxError: Unexpected number
const firstChar = str.0;

console.log(firstChar);

Since 0 is a whole number, we don’t need to wrap it in quotes to access it. We can pass a number directly, just like we do with arrays.

JavaScriptCopied!

const str = 'Coding Beauty';

// Quotes are not needed to pass 0
const firstChar = str[0];

console.log(firstChar); // C

Accessing a property that doesn’t exist returns undefined in JavaScript. So this method is unlike charAt(), which returns an empty string (''):

JavaScriptCopied!

const str = 'Coding Beauty';

const char1 = str[20];
const char2 = str.charAt(20);

console.log(char1); // undefined
console.log(char2); // '' (empty string)

3. String substring() method

With this method, we call substring() on the string, passing 0 as the first argument and 1 as the second.

JavaScriptCopied!

const str = 'Coding Beauty';

const firstChar = str.substring(0, 1);
console.log(firstChar); // C

The String substring() method returns 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 1 is a substring containing only the first string character.

4. String slice() method

With this method, we call slice() on the string, passing 0 as the first argument and 1 as the second.

JavaScriptCopied!

const str = 'Coding Beauty';

const firstChar = str.slice(0, 1);
console.log(firstChar); // C

The String slice() method extracts the part of string between the start and end indexes, which are specified by the first and second arguments respectively. The substring between the indexes 0 and 1 is a substring containing only the first string character.

Note

The slice() and substring() method work similarly for our use case, but this isn’t always so. One of the differences between them is that while substring() swaps its arguments if the first is greater than the second, slice() returns an empty string:

JavaScriptCopied!

const str = 'Coding Beauty';

const subStr1 = str.substring(6, 0);
const subStr2 = str.slice(6, 0);

// Equivalent to str.substring(0, 6)
console.log(subStr1); // Coding

console.log(subStr2); // '' (empty string)


5. String at() method

Another way to get the first character of a string is with the String at() method, newly added in ES2022. We call at() on the string, passing 0 as an argument.

JavaScriptCopied!

const str = 'Coding Beauty';

const firstChar = str.at(0);
console.log(firstChar); // C

The String at() method returns the character of a string at the specified index.

When negative integers are passed to at(), it counts back from the last string character. This is unlike charAt(), which returns an empty string:

JavaScriptCopied!

const str = 'Coding Beauty';

const char1 = str.at(-3);
const char2 = str.charAt(-3);

console.log(char1); // u
console.log(char2); // '' (empty string)

11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.