Get the first Character of a String in JavaScript

# Get the first Character of a String in JavaScript

To get the first character of a string, call the String.charAt() method with an index of 0.

The method will return a new string that only contains the first character of the original string.

Copied!
const str = 'bobbyhadz.com';

const firstChar = str.charAt(0);
console.log(firstChar); // 👉️ b

The String.charAt method returns the character at the specified index.

If the index doesn't exist in the string, the method returns an empty string.

Copied!
console.log('abc'.charAt(0)); // 👉️ a
console.log(''.charAt(0)); // 👉️ ""

If you call the String.charAt() method with an index that doesn't exist, it returns an empty string.

Copied!
const str = '';

const firstChar = str.charAt(0);
console.log(firstChar); // 👉️ ""

# Get the first Character of a String using bracket notation

An alternative approach is to directly access the index.

Accessing the string at index 0 returns the first character of the string.

Copied!
const str = 'bobbyhadz.com';

const firstChar = str[0];
console.log(firstChar); // 👉️ b

console.log('abcd'[0]); // 👉️ a

If we access the string at the specific index, we can avoid calling the charAt() method.

However, if you try to access the string at an index that doesn't exist, undefined is returned.

Copied!
const str = '';

const first = str[0];
console.log(first); // 👉️ undefined

This is the reason I prefer using the String.charAt() method.

I'd rather get an empty string than an undefined value if I access a string at an index that doesn't exist.

# Get the first Character of a String using String.at()

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

Copied!
const str = 'bobbyhadz.com';

const firstChar = str.at(0);
console.log(firstChar); // 👉️ b

console.log('abcd'.at(0)); // 👉️ a
console.log(''.at(0)); // 👉️ undefined

The String.at method takes an integer and returns a new string containing the character at the specified position.

The String.at method allows for positive and negative integers.

You can use negative integers to count back from the end of the string.

Copied!
const str = 'bobbyhadz.com';

const firstChar = str.at(0);
console.log(firstChar); // 👉️ b

console.log(str.at(-1)); // 👉️ m
console.log(str.at(-2)); // 👉️ o
console.log(str.at(-3)); // 👉️ c

The String.at() method is quite convenient when you need to count backward.

The String.charAt() method and bracket notation approach don't support negative indexing.

Copied!
console.log(str.at(-1)); // 👉️ m

console.log(str.charAt(-1)); // 👉️ ""
console.log(str[-1]); // 👉️ undefined

You can also use the String.slice() method to get the first character of a string.

# Get the first Character of a String using String.slice()

Specify a start index of 0 and a stop index of 1 to get the first character of a string using the slice() method.

Copied!
const str = 'bobbyhadz.com';

const firstChar = str.slice(0, 1);
console.log(firstChar); // 👉️ b

The String.slice method extracts a section of a string and returns it, without modifying the original string.

The String.slice() method takes the following arguments:

When only a single argument is passed to the String.slice() method, the slice goes to the end of the string.

The stop index is exclusive (up to, but not including), so the second character is not contained in the result.

If you try to get the first character of an empty string using slice(), an empty string is returned.

Copied!
console.dir(''.slice(0, 1)); // 👉️ ''

# Get the first Character of a String using String.substring()

You can also use the String.substring() method in a similar way.

Copied!
const str = 'bobbyhadz.com';

const firstChar = str.substring(0, 1);
console.log(firstChar); // 👉️ b

The String.substring() method returns a slice of the string from the start index to the excluding end index.

The method takes the following parameters:

If no end index is specified the slice goes to the end of the string.

If you try to get the first character of an empty string using substring(), an empty string is returned.

Copied!
console.dir(''.substring(0, 1)); // 👉️ ''

The substring() and slice() method seem identical from the previous 2 code samples.

However, there are a couple of differences between the String.substring() and the String.slice() methods:

• The substring() method swaps its start and end index if the start index is greater than the end index. The slice() method returns an empty string in this case.

Copied!
const str = 'bobby';

console.log(str.substring(3, 0)); // 👉️ bob

console.log(str.slice(3, 0)); // 👉️ ''

• If either of both arguments passed to substring() are negative, they are treated as if they were 0.

Copied!
const str = 'bobby';

console.log(str.substring(-3)); // 👉️ bobby

console.log(str.slice(-3)); // 👉️ bby

When given a negative index, the slice() method counts backward from the end of the string to find the indexes.

# Get the first Character of a String using Array.from()

When working with Unicode strings that might contain emojis or other special characters, you might have to convert the string to an array of characters using Array.from().

Copied!
const str = '🐴bobbyhadz.com';

const firstChar = Array.from(str)[0];
console.log(firstChar); // '🐴'

The Array.from() method converts the supplied iterable to an array.

Copied!
const str = '🐴bobbyhadz.com';

// [
//   '🐴', 'b', 'o', 'b',
//   'b',  'y', 'h', 'a',
//   'd',  'z', '.', 'c',
//   'o',  'm'
// ]
console.log(Array.from(str));

The last step is to access the character at index 0.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Get the first N characters of a String in JavaScript
• Get Index of First, Last or All occurrences in String in JS
• Get the last Character of a String in JavaScript
• Get the Nth Character of a String in JavaScript
• Get the Substring after a specific Character in JavaScript
• Get the Substring before a specific Character in JavaScript
• Get a Substring between 2 Characters in JavaScript