华山资源网

利用JavaScript为句子加标题的3种方法示例
网络编程 2024/11/20 佚名
3 1

前言

本文基于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.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com