资讯专栏INFORMATION COLUMN

【重温基础】8.字符串

Batkid / 1886人阅读

摘要:字符串拓展在我们判断字符串是否包含另一个字符串时,之前,我们只有方法,之后我们又多了三种方法返回布尔值,表示是否找到参数字符串。返回布尔值,表示参数字符串是否在原字符串的头部。

本文是 重温基础 系列文章的第八篇。
今日感受:人在异乡,也不能忘记汤圆。

系列目录:

【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)

【重温基础】1.语法和数据类型

【重温基础】2.流程控制和错误处理

【重温基础】3.循环和迭代

【重温基础】4.函数

【重温基础】5.表达式和运算符

【重温基础】6.数字

【重温基础】7.时间对象

本章节复习的是JS中的字符串,还有字符串的相关属性和方法。

前置知识:
JavaScript中的字符串的每个元素,在字符串中都占据一个位置,第一个元素的索引值为0,往后累加,另外创建字符串有2个方法:

1.字面量创建:

let a = "hello";  // "hello"
typeof a; // "string"

2.字符串对象创建:

let a = new String("hello"); //String {"hello"}
typeof a; // "object"

实际开发中,除非必要,建议使用字面量创建,因为两种创建方法会有差异:

let a1 = "1+1";
let a2 = new String("1+1");
eval(a1); // number  2
eval(a2); // string  "1+1"

String有一个length属性,表示字符串中字符个数:

let a = "hello";
a.length; // 5
1.String对象方法:

String对象的方法非常多,建议大家可以到 W3school JavaScript String 对象 学习完整的内容。

方法 描述
charAt, charCodeAt, codePointAt 返回字符串指定位置的字符或者字符编码。
indexOf, lastIndexOf 分别返回字符串中指定子串的位置或最后位置。
startsWith, endsWith, includes 返回字符串是否以指定字符串开始、结束或包含指定字符串。
concat 连接两个字符串并返回新的字符串。
fromCharCode, fromCodePoint 从指定的Unicode值序列构造一个字符串。这是一个String类方法,不是实例方法。
split 通过将字符串分离成一个个子串来把一个String对象分裂到一个字符串数组中。
slice 从一个字符串提取片段并作为新字符串返回。
substring, substr 分别通过指定起始和结束位置,起始位置和长度来返回字符串的指定子集。
match, replace, search 通过正则表达式来工作.
toLowerCase, toUpperCase 分别返回字符串的小写表示和大写表示。
normalize 按照指定的一种 Unicode 正规形式将当前字符串正规化。
repeat 将字符串内容重复指定次数后返回。
trim 去掉字符串开头和结尾的空白字符。
1.1 charAt

作用:查找字符串中指定位置内容
str.charAt(index) index : 查找的字符的下标(大于等于0,若小于0则返回空字符串),若没传则表示1。

let a = "hello leo!"
a.charAt();  // "h"
a.charAt(1); // "e"
a.charAt(-1);// ""
1.2.indexOf和lastIndexOf

作用:查找指定字符串位置
indexOflastIndexOf相同点:
两者接收的参数一致,没有查到内容,返回-1
indexOflastIndexOf不同点:
若查找到内容,则indexOf返回第一次出现的索引lastIndexOf返回最后一次出现的索引

str.indexOf(value[, fromIndex])接收2个参数:

value : 需要查找的字符串内容;

fromIndex : 可选,开始查找的位置,默认0;

let a = "hello leo";     
let b = a.indexOf("lo");  // 3
let c = a.indexOf("lo",4);// -1
let e = a.lastIndexOf("l");  // 6

一定要注意:

fromIndex > a.length,则fromIndex被视为a.length

let a = "hello leo";  
let b = a.indexOf("lo",99);// -1

fromIndex < 0,则fromIndex被视为0

let a = "hello leo";  
let b = a.indexOf("lo",-1);// 3

indexOflastIndexOf区分大小写。

let a = "hello leo"; 
let b = a.indexOf("Lo"); // -1
1.3 concat

作用:连接字符串。
concat()接收任意个参数作为连接的字符串,返回一个合并后的新字符串。

let a = "hello";
let b = " leo ";
let c = "!"
a.concat(b,c); // "hello leo !"
1.4 split

作用:把字符串分割为字符串数组,并可以指定分隔符。
split(separator[,limit])可以接收2个参数:

separator:必需,字符串或者正则表达式,作为分割的内容;

limit:可选,作为指定返回的数组的最大长度;

separator"",则字符串会在每个字符之间分割;

let a = "How are you doing today?";
a.split();
// ["How are you doing today?"]
a.split("");
// ["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", "g", " ", "t", "o", "d", "a", "y", "?"]
a.split(" ");
// ["How", "are", "you", "doing", "today?"]
a.split("",4);
// ["H", "o", "w", " "]
a.split(" ",4);
// ["How", "are", "you", "doing"]

使用其他分割符号:

let a = "ni,hao,a!";
a.split(","); // ["ni", "hao", "a!"]
1.5 slice

作用:提取并返回字符串的片断。
slice([start,end]) 可以接收2个参数:

start:要提取的片段的起始下标,若小于零,则从字符串尾部开始算起,如-1表示字符串最后一个字符,-2为倒数第二个字符等等。

end:要提取的片段的结束下标,若没有传入,则表示从start到字符串结尾,若为负数则从字符串尾部开始算起。

let a = "How are you doing today?";
a.slice();      // "How are you doing today?"
a.slice(1);     // "ow are you doing today?"
a.slice(-1);    // "?"
a.slice(1,5);   // "ow a"
a.slice(1,-1);  // "ow are you doing today"
a.slice(-2,-1); // "y"
2.字符串拓展(ES6) 2.1 includes(),startsWith(),endsWith()

在我们判断字符串是否包含另一个字符串时,ES6之前,我们只有typeof方法,ES6之后我们又多了三种方法:

includes():返回布尔值,表示是否找到参数字符串

startsWith():返回布尔值,表示参数字符串是否在原字符串的头部

endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部

let a = "hello leo";
a.startsWith("leo");   // false
a.endsWith("o");       // true
a.includes("lo");      // true

并且这三个方法都支持第二个参数,表示起始搜索的位置。

let a = "hello leo";
a.startsWith("leo",1);   // false
a.endsWith("o",5);       // true
a.includes("lo",6);      // false

endsWith 是针对前 n 个字符,而其他两个是针对从第n个位置直到结束。

2.2 repeat()

repeat方法返回一个新字符串,表示将原字符串重复n次。
基础用法

"ab".repeat(3);        // "ababab"
"ab".repeat(0);        // ""

特殊用法:

参数为小数,则取整

"ab".repeat(2.3);      // "abab"

参数为负数Infinity,则报错

"ab".repeat(-1);       // RangeError
"ab".repeat(Infinity); // RangeError

参数为0到-1的小数NaN,则取0

"ab".repeat(-0.5);     // ""
"ab".repeat(NaN);      // ""

参数为字符串,则转成数字

"ab".repeat("ab");     // ""
"ab".repeat("3");      // "ababab"
2.3 padStart(),padEnd()

用于将字符串头部尾部补全长度,padStart()头部补全padEnd()尾部补全
这两个方法接收2个参数,第一个指定字符串最小长度,第二个用于补全的字符串
基础用法

"x".padStart(5, "ab");   // "ababx"
"x".padEnd(5, "ab");     // "xabab"

特殊用法:

原字符串长度,大于或等于指定最小长度,则返回原字符串。

"xyzabc".padStart(5, "ab"); // "xyzabc"

用来补全的字符串长度和原字符串长度之和,超过指定最小长度,则截去超出部分的补全字符串。

"ab".padStart(5,"012345"); // "012ab"

省略第二个参数,则用空格补全。

"x".padStart(4);           // "    x"
"x".padEnd(4);             // "x    "
2.4 模版字符串

用于拼接字符串,ES6之前:

let a = "abc" + 
    "def" + 
    "ghi";

ES6之后:

let a = `
    abc
    def
    ghi
`

拼接变量:
反引号(`)中使用${}包裹变量或方法。

// ES6之前
let a = "abc" + v1 + "def";

// ES6之后
let a = `abc${v1}def`
3.字符串拓展(ES7)

用来为字符串填充特定字符串,并且都有两个参数:字符串目标长度填充字段,第二个参数可选,默认空格。

"es8".padStart(2);          // "es8"
"es8".padStart(5);          // "  es8"
"es8".padStart(6, "woof");  // "wooes8"
"es8".padStart(14, "wow");  // "wowwowwowwoes8"
"es8".padStart(7, "0");     // "0000es8"

"es8".padEnd(2);            // "es8"
"es8".padEnd(5);            // "es8  "
"es8".padEnd(6, "woof");    // "es8woo"
"es8".padEnd(14, "wow");    // "es8wowwowwowwo"
"es8".padEnd(7, "6");       // "es86666"

从上面结果来看,填充函数只有在字符长度小于目标长度时才有效,若字符长度已经等于或小于目标长度时,填充字符不会起作用,而且目标长度如果小于字符串本身长度时,字符串也不会做截断处理,只会原样输出。

参考资料

MDN Text formatting

W3school JavaScript String 对象

本部分内容到这结束

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推荐 https://github.com/pingan8787...
JS小册 js.pingan8787.com

欢迎关注微信公众号【前端自习课】每天早晨,与您一起学习一篇优秀的前端技术博文 .

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100325.html

相关文章

  • 重温基础】11.Map和Set对象

    摘要:本文是重温基础系列文章的第十一篇。返回一个布尔值,表示该值是否为的成员。使用回调函数遍历每个成员。与数组相同,对每个成员执行操作,且无返回值。 本文是 重温基础 系列文章的第十一篇。 今日感受:注意身体,生病花钱又难受。 系列目录: 【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理) 【重温基础】1.语法和数据类型 【重温基础】2.流程控制和错误处理 【重温基础】3....

    meteor199 评论0 收藏0
  • 重温基础】15.JS对象介绍

    摘要:构造函数通常首字母大写,用于区分普通函数。这种关系常被称为原型链,它解释了为何一个对象会拥有定义在其他对象中的属性和方法。中所有的对象,都有一个属性,指向实例对象的构造函数原型由于是个非标准属性,因此只有和两个浏览器支持,标准方法是。 从这篇文章开始,复习 MDN 中级教程 的内容了,在初级教程中,我和大家分享了一些比较简单基础的知识点,并放在我的 【Cute-JavaScript】系...

    booster 评论0 收藏0
  • 重温基础】7.时间对象

    摘要:本文是重温基础系列文章的第七篇。系列目录复习资料资料整理个人整理重温基础语法和数据类型重温基础流程控制和错误处理重温基础循环和迭代重温基础函数重温基础表达式和运算符重温基础数字本章节复习的是中的时间对象,一些处理的方法。 本文是 重温基础 系列文章的第七篇。今日感受:做好自律。 系列目录: 【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理) 【重温基础】1.语法和数据类型...

    YuboonaZhang 评论0 收藏0
  • 重温基础】5.表达式和运算符

    摘要:系列目录复习资料资料整理个人整理重温基础语法和数据类型重温基础流程控制和错误处理重温基础循环和迭代重温基础函数本章节复习的是中的表达式和运算符,用好这些可以大大提高开发效率。 本文是 重温基础 系列文章的第五篇。今日感受:家的意义。 系列目录: 【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理) 【重温基础】1.语法和数据类型 【重温基础】2.流程控制和错误处理 【重温基...

    马忠志 评论0 收藏0
  • 重温基础】12.使用对象

    摘要:本文是重温基础系列文章的第十二篇。注意对象的名称,对大小写敏感。基础用法第一个参数是目标对象,后面参数都是源对象。用途遍历对象属性。用途将对象转为真正的结构。使用场景取出参数对象所有可遍历属性,拷贝到当前对象中。类似方法合并两个对象。 本文是 重温基础 系列文章的第十二篇。 今日感受:需要总结下2018。 这几天,重重的感冒发烧,在家休息好几天,伤···。 系列目录: 【复习资料...

    garfileo 评论0 收藏0

发表评论

0条评论

Batkid

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<