在本文中，我們將研究多種方法來輕松獲取 JavaScript 中字符串的第一個(gè)字符。

1. charAt() 方法

要獲取字符串的第一個(gè)字符，我們可以在字符串上調(diào)用 charAt() ，將 0 作為參數(shù)傳遞。例如，str.charAt(0) 返回 str 的第一個(gè)字符。

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

StringcharAt()返回指定索引處字符串的字符，第一個(gè)字符的索引為 0。

2.括號表示法（[]）屬性訪問

要獲取字符串的第一個(gè)字符，我們也可以使用括號表示法 ([]) 訪問字符串的 0 屬性：

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

當(dāng)屬性名稱是無效的 JavaScript 標(biāo)識符時(shí)，括號表示法屬性訪問是點(diǎn)表示法的有用替代方法。例如，嘗試使用點(diǎn)表示法訪問 0 屬性將導(dǎo)致語法錯(cuò)誤，因?yàn)?0 不是有效標(biāo)識符：

const str = 'Coding Beauty';
// SyntaxError: Unexpected number
const firstChar = str.0;
console.log(firstChar);

筆記1

由于 0 是一個(gè)整數(shù)，我們不需要用引號將它括起來來訪問它：

const str = 'Coding Beauty';
// Quotes are not needed to pass 0
const firstChar = str[0];
console.log(firstChar); // C

筆記2

訪問不存在的屬性在 JavaScript 中返回 undefined。這與返回空字符串 ('') 的 charAt() 不同：

const str = 'Coding Beauty';
const char1 = str[20];
const char2 = str.charAt(20);
console.log(char1); // undefined
console.log(char2); // '' (empty string)

3.substring()方法

使用此方法，我們在字符串上調(diào)用 substring()，將 0 作為第一個(gè)參數(shù)傳遞，將 1 作為第二個(gè)參數(shù)傳遞。

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

substring() 方法返回開始索引和結(jié)束索引之間的字符串部分，這兩個(gè)索引分別由第一個(gè)和第二個(gè)參數(shù)指定。索引 0 和 1 之間的子字符串是僅包含第一個(gè)字符串字符的子字符串。

4. slice() 方法

使用此方法，我們在字符串上調(diào)用 slice()，將 0 作為第一個(gè)參數(shù)傳遞，將 1 作為第二個(gè)參數(shù)傳遞。

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

slice() 方法提取開始和結(jié)束索引之間的一部分字符串，這兩個(gè)索引分別由第一個(gè)和第二個(gè)參數(shù)指定。索引 0 和 1 之間的子字符串是僅包含第一個(gè)字符串字符的子字符串。

筆記

slice() 和 substring() 方法在我們的用例中的工作方式類似，但并非總是如此。它們之間的一個(gè)區(qū)別是，如果第一個(gè)大于第二個(gè)，則 substring() 交換其參數(shù)，而 slice() 返回一個(gè)空字符串：

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); // Codingconsole.log(subStr2); // '' (empty string)

5.at()方法

獲取字符串第一個(gè)字符的另一種方法是使用 String at() 方法。我們在字符串上調(diào)用 at()，將 0 作為參數(shù)傳遞。

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

at() 方法返回指定索引處字符串的字符。

筆記

當(dāng)負(fù)整數(shù)傳遞給 at() 時(shí)，它從最后一個(gè)字符串字符開始倒數(shù)。這與返回空字符串的 charAt() 不同：

const str = 'Coding Beauty';
const char1 = str.at(-3);
const char2 = str.charAt(-3);
console.log(char1); // u
console.log(char2); // '' (empty string)

寫在最后

這5種方式雖然都可以實(shí)現(xiàn)從JavaScript中獲取字符串中第一個(gè)字符串的方法，但是具體使用那種情況，我們還是需要根據(jù)具體開發(fā)項(xiàng)目來，選擇最適合最優(yōu)的方案。