DDR爱好者之家

利用JavaScript为句子加标题的3种方法示例
站长资源 2024/12/24 佚名
29 1538
DDR爱好者之家 Design By 杰米

前言

本文基于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");

总结

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米