前言
本文基于Free Code Camp基本算法腳本“標(biāo)題案例一句”。
在此算法中，我們要更改文本字符串，以便每個(gè)單詞的開頭始終都有一個(gè)大寫字母。
在本文中，我將解釋三種方法。首先使用FOR循環(huán)，其次使用map（）方法，第三次使用replace（）方法。
算法挑戰(zhàn)
- 返回提供的字符串，每個(gè)單詞的首字母大寫。確保單詞的其余部分為小寫。
- 出于此練習(xí)的目的，你還應(yīng)該大寫連接詞，例如“ the”和“ of”。
提供的測試用例
- titleCase(“I'm a little tea pot”)返回一個(gè)字符串。
- titleCase(“I'm a little tea pot”)返回“I'm A Little Tea Pot”。
- titleCase(“sHoRt AnD sToUt”)返回“ Short And Stout”。
- titleCase(“HERE IS MY HANDLE HERE IS MY SPOUT”)返回“Here Is My Handle Here Is My Spout”。
1.標(biāo)題大小寫帶有FOR循環(huán)的句子
對于此解決方案，我們將使用String.prototype.toLowerCase（）方法
String.prototype.split（）方法，String.prototype.charAt（）方法
String.prototype.slice（）方法和Array.prototype.join（）方法
- toLowerCase()的方法返回主字符串值轉(zhuǎn)換為小寫
- split()的方法通過分離串為子分割字符串對象到字符串?dāng)?shù)組。
- charAt()的方法返回從字符串指定的字符。
- slice()的方法提取的字符串的一部分，并返回一個(gè)新的字符串。
- join()的方法連接到一個(gè)字符串?dāng)?shù)組的所有元素。
我們將需要在split（）方法的括號之間添加一個(gè)空格
|
1
|
var strSplit = "I'm a little tea pot".split(' '); |
它將輸出一個(gè)由單詞組成的數(shù)組：
|
1
|
var strSplit = ["I'm", "a", "little", "tea", "pot"]; |
如果不在括號中添加空格，則將得到以下輸出：
|
1
|
var strSplit = ["I", "'", "m", " ", "a", " ", "l", "i", "t", "t", "l", "e", " ", "t", "e", "a", " ", "p", "o", "t"]; |
我們將其合并
|
1
|
str[i].charAt(0).toUpperCase() |
在FOR循環(huán)中將大寫前的字符串索引0字符
和
|
1
|
str[i].slice(1) |
將從索引1提取到字符串的末尾。
為了標(biāo)準(zhǔn)化，我們將整個(gè)字符串設(shè)置為小寫。
有注釋：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
function titleCase(str) { // Step 1. Lowercase the string str = str.toLowerCase(); // str = "I'm a little tea pot".toLowerCase(); // str = "i'm a little tea pot"; // Step 2. Split the string into an array of strings str = str.split(' '); // str = "i'm a little tea pot".split(' '); // str = ["i'm", "a", "little", "tea", "pot"]; // Step 3. Create the FOR loop for (var i = 0; i < str.length; i++) { str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1); /* Here str.length = 5 1st iteration: str[0] = str[0].charAt(0).toUpperCase() + str[0].slice(1); str[0] = "i'm".charAt(0).toUpperCase() + "i'm".slice(1); str[0] = "I" + "'m"; str[0] = "I'm"; 2nd iteration: str[1] = str[1].charAt(0).toUpperCase() + str[1].slice(1); str[1] = "a".charAt(0).toUpperCase() + "a".slice(1); str[1] = "A" + ""; str[1] = "A"; 3rd iteration: str[2] = str[2].charAt(0).toUpperCase() + str[2].slice(1); str[2] = "little".charAt(0).toUpperCase() + "little".slice(1); str[2] = "L" + "ittle"; str[2] = "Little"; 4th iteration: str[3] = str[3].charAt(0).toUpperCase() + str[3].slice(1); str[3] = "tea".charAt(0).toUpperCase() + "tea".slice(1); str[3] = "T" + "ea"; str[3] = "Tea"; 5th iteration: str[4] = str[4].charAt(0).toUpperCase() + str[4].slice(1); str[4] = "pot".charAt(0).toUpperCase() + "pot".slice(1); str[4] = "P" + "ot"; str[4] = "Pot"; End of the FOR Loop*/ } // Step 4. Return the output return str.join(' '); // ["I'm", "A", "Little", "Tea", "Pot"].join(' ') => "I'm A Little Tea Pot"}titleCase("I'm a little tea pot"); |
沒有注釋：
|
1
2
3
4
5
6
7
8
|
function titleCase(str) { str = str.toLowerCase().split(' '); for (var i = 0; i < str.length; i++) { str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1); } return str.join(' ');}titleCase("I'm a little tea pot"); |
2.使用map（）方法對案例進(jìn)行標(biāo)題案例
對于此解決方案，我們將使用Array.prototype.map（）方法。
- map()的方法創(chuàng)建調(diào)用此陣列中的每個(gè)元件上的提供功能的結(jié)果的新的數(shù)組。使用map會依次為數(shù)組中的每個(gè)元素調(diào)用一次提供的回調(diào)函數(shù)，并根據(jù)結(jié)果構(gòu)造一個(gè)新的數(shù)組。
如上例所示，在應(yīng)用map（）方法之前，我們將小寫并分割字符串。
代替使用FOR循環(huán)，我們將把map（）方法作為條件與上一個(gè)示例的連接相同。
|
1
|
(word.charAt(0).toUpperCase() + word.slice(1)); |
有注釋：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
function titleCase(str) { // Step 1. Lowercase the string str = str.toLowerCase() // str = "i'm a little tea pot"; // Step 2. Split the string into an array of strings .split(' ') // str = ["i'm", "a", "little", "tea", "pot"]; // Step 3. Map over the array .map(function(word) { return (word.charAt(0).toUpperCase() + word.slice(1)); /* Map process 1st word: "i'm" => (word.charAt(0).toUpperCase() + word.slice(1)); "i'm".charAt(0).toUpperCase() + "i'm".slice(1); "I" + "'m"; return "I'm"; 2nd word: "a" => (word.charAt(0).toUpperCase() + word.slice(1)); "a".charAt(0).toUpperCase() + "".slice(1); "A" + ""; return "A"; 3rd word: "little" => (word.charAt(0).toUpperCase() + word.slice(1)); "little".charAt(0).toUpperCase() + "little".slice(1); "L" + "ittle"; return "Little"; 4th word: "tea" => (word.charAt(0).toUpperCase() + word.slice(1)); "tea".charAt(0).toUpperCase() + "tea".slice(1); "T" + "ea"; return "Tea"; 5th word: "pot" => (word.charAt(0).toUpperCase() + word.slice(1)); "pot".charAt(0).toUpperCase() + "pot".slice(1); "P" + "ot"; return "Pot"; End of the map() method */}); // Step 4. Return the output return str.join(' '); // ["I'm", "A", "Little", "Tea", "Pot"].join(' ') => "I'm A Little Tea Pot"}titleCase("I'm a little tea pot"); |
沒有注釋：
|
1
2
3
4
5
6
|
function titleCase(str) { return str.toLowerCase().split(' ').map(function(word) { return (word.charAt(0).toUpperCase() + word.slice(1)); }).join(' ');}titleCase("I'm a little tea pot"); |
3.使用map（）和replace（）方法對句子進(jìn)行標(biāo)題處理
對于此解決方案，我們將繼續(xù)使用Array.prototype.map（）方法并添加String.prototype.replace（）方法。
replace()的方法返回與一些或通過替換替換的圖案的所有比賽的新字符串。
在我們的例子中，replace（）方法的模式將是一個(gè)字符串，該字符串將被新的替換替換，并將被視為逐字字符串。我們還可以使用正則表達(dá)式作為模式來解決此算法。
如將在第一個(gè)示例中看到的那樣，在應(yīng)用map（）方法之前，我們將小寫并拆分字符串。
有注釋：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
function titleCase(str) { // Step 1. Lowercase the string str = str.toLowerCase() // str = "i'm a little tea pot"; // Step 2. Split the string into an array of strings .split(' ') // str = ["i'm", "a", "little", "tea", "pot"]; // Step 3. Map over the array .map(function(word) { return word.replace(word[0], word[0].toUpperCase()); /* Map process 1st word: "i'm" => word.replace(word[0], word[0].toUpperCase()); "i'm".replace("i", "I"); return word => "I'm" 2nd word: "a" => word.replace(word[0], word[0].toUpperCase()); "a".replace("a", "A"); return word => "A" 3rd word: "little" => word.replace(word[0], word[0].toUpperCase()); "little".replace("l", "L"); return word => "Little" 4th word: "tea" => word.replace(word[0], word[0].toUpperCase()); "tea".replace("t", "T"); return word => "Tea" 5th word: "pot" => word.replace(word[0], word[0].toUpperCase()); "pot".replace("p", "P"); return word => "Pot" End of the map() method */}); // Step 4. Return the output return str.join(' '); // ["I'm", "A", "Little", "Tea", "Pot"].join(' ') => "I'm A Little Tea Pot"}titleCase("I'm a little tea pot"); |
沒有注釋：
|
1
2
3
4
5
6
|
function titleCase(str) { return str.toLowerCase().split(' ').map(function(word) { return word.replace(word[0], word[0].toUpperCase()); }).join(' ');}titleCase("I'm a little tea pot"); |
總結(jié)
到此這篇關(guān)于利用JavaScript為句子加標(biāo)題的文章就介紹到這了,更多相關(guān)JavaScript為句子加標(biāo)題內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/qq_25879801/article/details/111461637
