利用JavaScript为句子加标题的3种方法示例


Posted in Javascript onJanuary 05, 2021

前言

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

总结

到此这篇关于利用JavaScript为句子加标题的文章就介绍到这了,更多相关JavaScript为句子加标题内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
IE8 中使用加速器(Activities)
May 14 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 #Javascript
详解JavaScript中分解数字的三种方法
Jan 05 #Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 #Vue.js
mapboxgl实现带箭头轨迹线的代码
Jan 04 #Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 #Vue.js
vue3弹出层V3Popup实例详解
Jan 04 #Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 #Vue.js
You might like
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
php结合正则获取字符串中数字
2015/06/19 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
Jquery之美中不足小结
2011/02/16 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
python 实现登录网页的操作方法
2018/05/11 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
信息总监管理职责范本
2014/03/08 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
校长个人总结
2015/03/03 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书