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

Tari Ibaba
Last updated on December 03, 2022
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.

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 ([]):

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:

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.

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 (''):

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.

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.

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.

wp:paragraph

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.

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:

const str = 'Coding Beauty';

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

console.log(char1); // u
console.log(char2); // '' (empty string)
Coding Beauty Assistant logo

Try Coding Beauty AI Assistant for VS Code

Meet the new intelligent assistant: tailored to optimize your work efficiency with lightning-fast code completions, intuitive AI chat + web search, reliable human expert help, and more.

See also