白云岛资源网 Design By www.pvray.com
前言
本文基于Free Code Camp基本算法脚本“标题案例一句”。
在此算法中，我们要更改文本字符串，以便每个单词的开头始终都有一个大写字母。
在本文中，我将解释三种方法。首先使用FOR循环，其次使用map（）方法，第三次使用replace（）方法。
算法挑战
- 返回提供的字符串，每个单词的首字母大写。确保单词的其余部分为小写。
- 出于此练习的目的，你还应该大写连接词，例如“ the”和“ of”。
提供的测试用例
- titleCase(“I'm a little tea pot”)返回一个字符串。
- 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.标题大小写带有FOR循环的句子
对于此解决方案，我们将使用String.prototype.toLowerCase（）方法
String.prototype.split（）方法，String.prototype.charAt（）方法
String.prototype.slice（）方法和Array.prototype.join（）方法
- toLowerCase()的方法返回主字符串值转换为小写
- split()的方法通过分离串为子分割字符串对象到字符串数组。
- charAt()的方法返回从字符串指定的字符。
- slice()的方法提取的字符串的一部分，并返回一个新的字符串。
- join()的方法连接到一个字符串数组的所有元素。
我们将需要在split（）方法的括号之间添加一个空格
var strSplit = "I'm a little tea pot".split(' ');
它将输出一个由单词组成的数组：
var strSplit = ["I'm", "a", "little", "tea", "pot"];
如果不在括号中添加空格，则将得到以下输出：
var strSplit = ["I", "'", "m", " ", "a", " ", "l", "i", "t", "t", "l", "e", " ", "t", "e", "a", " ", "p", "o", "t"];
我们将其合并
str[i].charAt(0).toUpperCase()
在FOR循环中将大写前的字符串索引0字符
和
str[i].slice(1)
将从索引1提取到字符串的末尾。
为了标准化，我们将整个字符串设置为小写。
有注释：
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");
没有注释：
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（）方法对案例进行标题案例
对于此解决方案，我们将使用Array.prototype.map（）方法。
- map()的方法创建调用此阵列中的每个元件上的提供功能的结果的新的数组。使用map会依次为数组中的每个元素调用一次提供的回调函数，并根据结果构造一个新的数组。
如上例所示，在应用map（）方法之前，我们将小写并分割字符串。
代替使用FOR循环，我们将把map（）方法作为条件与上一个示例的连接相同。
(word.charAt(0).toUpperCase() + word.slice(1));
有注释：
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");
没有注释：
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（）方法对句子进行标题处理
对于此解决方案，我们将继续使用Array.prototype.map（）方法并添加String.prototype.replace（）方法。
replace()的方法返回与一些或通过替换替换的图案的所有比赛的新字符串。
在我们的例子中，replace（）方法的模式将是一个字符串，该字符串将被新的替换替换，并将被视为逐字字符串。我们还可以使用正则表达式作为模式来解决此算法。
如将在第一个示例中看到的那样，在应用map（）方法之前，我们将小写并拆分字符串。
有注释：
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");
没有注释：
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");
总结
白云岛资源网 Design By www.pvray.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
白云岛资源网 Design By www.pvray.com
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。