JavaScript学习笔记（二十一）——字符串内置功能

小狐狸ya

于 2022-06-24 17:43:39 发布

阅读量190

点赞数

分类专栏：笔记文章标签： ES6 子串识别 repeat 模板字符串标签模板

本文链接：https://blog.csdn.net/qq_56607109/article/details/125449929

版权

笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

文章目录

- 字符串内置功能

字符串内置功能

es5中：

字符串的内置功能

函数	功能描述
anchor()	创建 HTML 锚。
big()	用大号字体显示字符串。
blink()	显示闪动字符串。
bold()	使用粗体显示字符串。
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接字符串。
fixed()	以打字机文本显示字符串。
fontcolor()	使用指定的颜色来显示字符串。
fontsize()	使用指定的尺寸来显示字符串。
fromCharCode()	从字符编码创建一个字符串。
indexOf()	检索字符串。没有就为-1
italics()	使用斜体显示字符串。
lastIndexOf()	从后向前搜索字符串。
link()	将字符串显示为链接。
localeCompare() 了解	用本地特定的顺序来比较两个字符串。
match()	找到一个或多个正则表达式的匹配。
replace()	替换与正则表达式匹配的子串。
search()	检索与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。和subsring（）一起记忆。
small()	使用小字号来显示字符串。
split()	把字符串分割为字符串数组。笔试题：把网页的url的参数解析为一个对象。见后文~
strike()	使用删除线来显示字符串。
sub()	把字符串显示为下标。
substr() 重要	从起始索引号提取字符串中指定数目的字符。例如：（-3，2）意思就是从倒数后面第三个开始往后面取2个。
substring() 重要全小写	提取字符串中两个指定的索引号之间的字符。例如：（2，6）取索引号2到6之间的字符，不包含6。【左闭右开）
sup()	把字符串显示为上标。
toLocaleLowerCase()	把字符串转换为小写。
toLocaleUpperCase()	把字符串转换为大写。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
toSource()	代表对象的源代码。
toString()	返回字符串。
valueOf()	返回某个字符串对象的原始值。

其中加特效的不常用，用的时候一般是在object上添加mytool函数，然后进行拼接。

下面的必须掌握：

toUpperCase（）

将字符串转换为大写。

首字母大写需要自己设计，官方没有提供。

var str = 'hello';
String.prototype.capUpperCase = function (e) {
    var re = this[0].toUpperCase();
    for (var i = 1; i < this.length; i++) {
                re += this[i];
            }
            return re;
        }
        var re = str.capUpperCase();
        console.log(re);  //Hello

split（）

把字符串分割为字符串数组。

        var str = 'aasfscf';
        var re = str.split('sf');//以sf为分割线
        console.log(re)//打印['aa', 'scf']

slice（）

提取字符串的片断，并在新的字符串中返回被提取的部分。和subsring（）一起记忆。

        var str = 'aasfscf';
        var re = str.slice(2, 4); //sf
        var re2 = str.substring(2, 4) //sf
        console.log(re, re2)

substring（）和substr( )

注意都是小写！！！

区别：
- substr（-3，2）意思就是从倒数后面第三个开始往后面取2个。
- substring（-3，2）意思就是从下标-3开始取到下标2，不包含-3，【左闭右开）。
```
var str='aasfscf';
var re1=str.substring(-3,2);//aa
var re1=str.substr(-3,2);//sc
console.log(re1,re2);
```

indexof( ) 检测指定元素下标。

var str='abcsfggsd';
var re=str.indexOf('csf');//第二个参数不写默认为0  结果打印2
var re2=str.indexOf('a',1);//从下标1开始往后面搜查 没找到 打印-1

笔试题：找出“的”出现的次数：

        String.prototype.frequency = function (str) {
            var re = 1;
            var count = 0;
            do {
                re = this.indexOf(str, re + 1);
                if (re != -1) {
                    count++;
                }
            } while (re != -1);
            return count;
        }

        var str ='一个人的水平可以体现在说话上。 说话是本能，但会说话却是需要不断学习的必修课。 石油大王洛克菲勒说过一句话： 假如沟通是一样商品，我愿意付出比任何事物都高昂的价格来购买。 不会沟通的人，总是在无形中为自己筑起一道道围墙。';
        var re = str.frequency('的');
        console.log(re);  //打印4

toString( )和valueof( )

toString( ):返回字符串。
valueof( ):返回某个字符串对象的原始值。

        var str = 'hello';
        var re = str.valueOf();
        console.log(re);

        str.age=20;//隐式操作 字符串是基本数据类型，所有的基本数据当作对象使用时，点语法隐式操作（隐式包装一个对象）
        /* 
        隐式操作：
        var str=new String('hello');        
        */
        console.log(str.age);//undifined

es6新增：

1、子串的识别

es5中：

indexOf（）

es6中新增：

include（）：返回布尔值，判断是否找到参数字符串。
startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。

注意：

这三个方法只返回布尔值，如果需要知道子串的位置，还是得用 indexOf 和 lastIndexOf 。
这三个方法如果传入了正则表达式而不是字符串，会抛出错误。而 indexOf （）和 lastIndexOf（） 这两个方法，它们会将正则表达式转换为字符串并搜索它。
以上三个方法都可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引。

例子：

let string = "apple,banana,orange";
string.includes("banana");     // true
string.startsWith("apple");    // true
string.endsWith("apple");      // false
string.startsWith("banana",6)  // true

2、字符串重复

repeat()：返回新的字符串，表示将字符串重复指定次数返回。

console.log("Hello,".repeat(2));  // "Hello,Hello,"

分下面几种情况：

如果参数是小数，向下取整

console.log("Hello,".repeat(3.2));  // "Hello,Hello,Hello,"

如果参数是 0 至 -1 之间的小数，会进行取整运算，0 至 -1 之间的小数取整得到 -0 ，等同于 repeat 零次

console.log("Hello,".repeat(-0.5));  // ""

如果参数是 NaN，等同于 repeat 零次

console.log("Hello,".repeat(NaN));  // ""

如果参数是负数或者 Infinity ，会报错:

console.log("Hello,".repeat(-1));  
// RangeError: Invalid count value

console.log("Hello,".repeat(Infinity));  
// RangeError: Invalid count value

如果传入的参数是字符串，则会先将字符串转化为数字

console.log("Hello,".repeat("hh")); // ""
console.log("Hello,".repeat("2"));  // "Hello,Hello,"

3、字符串补全

padStart：返回新的字符串，表示用参数字符串从头部补全原字符串。
padEnd：返回新的字符串，表示用参数字符串从尾部补全原字符串。

以上两个方法接受两个参数，第一个参数是指定生成的字符串的最小长度，第二个参数是用来补全的字符串。

如果没有指定第二个参数，默认用空格填充。

console.log("h".padStart(5,"o"));  // "ooooh"
console.log("h".padEnd(5,"o"));    // "hoooo"
console.log("h".padStart(5));      // "    h"

如果指定的长度小于或等于原字符串的长度，则返回原字符串:

console.log("hello".padStart(5,"A"));  // "hello"

如果原字符串加上补全字符串长度大于指定长度，则截去超出位数的补全字符串:

console.log("hello".padEnd(10,",world!"));  // "hello,worl"

常用于补全位数：

console.log("123".padStart(10,"0"));  // "0000000123"

4、模板字符串

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

普通字符串

let string = `Hello'\n'world`;
console.log(string);

多行字符串

let string1 =  `Hey,
can you stop angry now?`;
console.log(string1);

变量名写在 ** ${}** 中，$ {} 中可以放入 JavaScript 表达式。比较常用。
```
let name = "Mike";
let age = 27;
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info);
```

字符串中调用函数

function f(){
  return "have fun!";
}
let string2= `Game start,${f()}`;
console.log(string2);  // Game start,have fun!

注意：模板字符串中的换行和空格都是会被保留的。

5、标签模板

标签模板，是一个函数的调用，其中调用的参数是模板字符串。

alert`Hello world!`;
// 等价于
alert('Hello world!');

应用：过滤 HTML 字符串，防止用户输入恶意内容。

function f(stringArr,...values){
 	let result = "";
    for (let i = 0; i < stringArr.length; i++) {
        values[i] = stringArr[i];
        if (values[i]) {
        result += String(values[i]).replace(/&/g, "&amp;")
                        .replace(/</g, "&lt;")
                        .replace(/>/g, "&gt;");
        }
     }
     return result;
}
var name = f('<Amy&MIke>');
element.innerHTML = `<p>Hi, ${name}.I would like send you some message.</p>`;