[JavaScript知识库] JavaScript中String对象的属性与方法整理

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript中String对象的属性与方法整理 -> 正文阅读

[JavaScript知识库]JavaScript中String对象的属性与方法整理

const string = 'string';
// ?anchor方法的目的：在对象中的指定文本两端放置一个有 NAME 属性的 HTML 锚点。
console.log(string.anchor(arg)); // <a name='arg'></a>

// at() 方法可返回指定位置的字符。与charAt()方法类似
console.log(string.at(5)); // g

// 给字符串外层加上<big>标签
console.log(string.big()); // <big>string</big>

// 给字符串外层加上<blink>标签
console.log(string.blink()); // <blink>string</blink>

// 给字符串外层加上<blink>标签
console.log(string.bold()); // <b>string</b>

// charAt() 方法可返回指定位置的字符。
console.log(string.charAt(0)); // s

// 将字符串转换为 Unicode 的 UTF-16 编码。传入字符串下标，如果下标越界，则返回NaN
console.log(string.charCodeAt(0)); // 115

// ES6新增属性，方法返回字符串指定 index 位置的字符的 Unicode 码位，
// 与旧的 charCodeAt 方法相比，它能够很好地支持增补字符。
console.log(string.codePointAt(0)); // 115

// 方法将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。
// concat 方法并不影响原字符串。
console.log(string.concat('sss', 'ddd')); // stringsssddd

// 对象的构造器
console.log(string.constructor); // ? String() { [native code] }

// 判断字符转是否已传入的参数结尾。返回值为boolean类型
console.log(string.endsWith('s')); // false

// 给标签外层加上<tt>标签
console.log(string.fixed()); // <tt>string</tt>

// 给字符串外层加上<font>标签，并加上color属性，且传入的参数为color属性的值
console.log(string.fontcolor('ss')); //<font color="ss">string</font>

// 给字符串外层加上<font>标签，并加上size属性，且传入的参数为size属性的值
console.log(string.fontsize('ss')); //<font size="ss">string</font>

// includes() 方法可用于判断字符串是否包含指定的子字符串。includes() 方法区分大小写。
// 该方法返回一个布尔值，如果包含指定的子字符串则返回 true，否则返回 false。
// searchvalue：要查找的字符串。（必须）
// start：设置查找的起始位置，默认为 0。（可选）
console.log(string.includes(searchvalue, start));

// 返回某个指定的字符串值在字符串中首次出现的位置。
// searchvalue：规定需检索的字符串值。（必需）
// 定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。（可选）
console.log(string.indexOf(searchvalue,fromindex));

// 给字符串外层加上<i>标签。
console.log(string.italics()); // <i>string</i>

// 返回某个指定的字符串值在字符串中最后一次出现的位置。
console.log('strings'.lastIndexOf('s')); // 6

// 获取字符串的长度
console.log(string.length); // 6

// 给字符串外层加上<a>标签，且传入的参数为href属性的值。
console.log(string.link('https://www.baidu.com/')); // <a href="https://www.baidu.com/">string</a>

// 比较两个字符串，并返回下列值中的一个：
// 如果 字符串 在 字母 表中 应该 排在 字符串 参数 之前， 则 返回 一个 负数；
// 如果 字符串 等于 字符串 参数， 则 返回 0；
// 如果 字符串 在 字母 表中 应该 排在 字符串 参数 之后， 则 返回 一个 正数；
console.log(string.localeCompare(target, locals));
console.log('a'.localeCompare('b')); // -1
console.log('a'.localeCompare('a')); // 0
console.log('b'.localeCompare('a')); // 1

// 在字符串上调用这个方法，本质上与调用RegExp的exec()方法相同。 
// match方法只接受一个参数，要么是RegExp，要么是字符串。
// match方法的返回值是一个数组。
console.log(string.match('g')); // ["g", index: 5, input: "string", groups: undefined]

// 当正则表达式携带 g 标志时，
// match 函数会以数组形式返回所有匹配的子串（并不会捕获括号中的内容），
// 不会更改正则表达式变量的 lastIndex
let myRe = /d(b+)(c*)d/g;
let str = 'cdbbcdbsbzdbd';
console.log(str.match(myRe)); // ?["dbbcd", "dbd"]

// 当正则表达式 不 携带 g 标志时，
// match 函数的返回形式与 exec 函数一致，
// 并且不会改变正则表达式变量的 lastIndex
let myRe = /d(b+)(c*)d/;
let str = 'cdbbcdbsbzdbd';
console.log(str.match(myRe)); // )?["dbbcd", "bb", "c", index: 1, input: "cdbbcdbsbzdbd", groups: undefined]

// matchAll 使用的正则表达式必须携带 g 标志，
// matchAll 函数会以迭代器（iterator）形式返回所有匹配的子串，每个子串都是与 exec 函数的返回格式一致，
// 不会更改正则表达式变量的 lastIndex
let myRe = /d(b+)(c*)d/g;
let str = 'cdbbcdbsbzdbd';
console.log([...str.matchAll(myRe)]); // [[],[]]

// 按照指定的一种 Unicode 正规形式将当前字符串正规化。（不知道有什么用）
console.log(string.normalize()); // string

// 用一个字符串填充当前字符串（如果需要的话则重复填充），
// 返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充。
console.log('1'.padEnd(2, '0')) // 10

// 用一个字符串填充当前字符串（如果需要的话则重复填充），
// 返回填充后达到指定长度的字符串。从当前字符串的头部（左侧）开始填充。
console.log('1'.padStart(2, '0')) // 01

// 字符串复制指定次数。
console.log(string.repeat(2)); // stringstring

// 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
// searchvalue: （必须） 规定子字符串或要替换的模式的 RegExp 对象。请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。
// newvalue：（必须）一个字符串值。规定了替换文本或生成替换文本的函数。
console.log(string.replace(searchvalue,newvalue));

// String.prototype.replaceAll这个方法在浏览器里是存在的，但是在node环境中是没有的，使用的时候需注意！
// 替换字符串中符合条件的所有字符。
console.log(string.replaceAll(searchvalue,newvalue));

// 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
// 返回第一个与 regexp 相匹配的子串的起始位置。如果没有找到任何匹配的子串，则返回 -1。
// earch() 方法不执行全局匹配，它将忽略标志 g。它同时忽略 regexp 的 lastIndex 属性，并且总是从字符串的开始进行检索，这意味着它总是返回 stringObject 的第一个匹配的位置。
// 对大小写敏感，如果要忽略大小写，请在正则表达式后面加i
console.log(string.search(regexp));

// 提取一个字符串
// start：子串开始的字符串索引。如果为负，则将从该字符串的尾部开始计算。也就是说，-1表示最后一个字符，-2表示倒数第二个字符，以此类推。
// end：紧跟着子串结尾的字符串索引。如果不指定，则子串将包括从start到当前字符串结尾的所有字符。如果这个参数是负的，则将从该字符串的尾部开始计算
// 返回一个新的字符串，对源字符串没有影响。
console.log(string.slice(start, end));

// 截取字符串
// from：一个非负整数，指定要提取的子串的第一个字符在string中的位置
// to：一个非负整数，比要提取的子串的最后一个字符的位置大1.如果省略这个参数，则返回的子串将持续到string的结尾。
// 返回一个新的字符串，长度为to-from，内容为string的一个字串。新字符串的内容为string中从位置from到to-1的字符的副本，对源字符串没有影响。
console.log(string.substring(from, to));

// 这个方法不再是ECMAScript的标准，因此已弃用
// start： 子串的开始位置。如果这个参数是负数，则将从string的尾部开始计算：-1表示最后一个字符，-2表示倒数第二个字符，以此类推
// length： 该子串的字符数。如果省略这个参数，则返回的子串将包含从开始位置到字符串结束的所有字符
// 返回string的一部分的一个副本，包含string中自start位置开始的length个字符，如果未指定length则包含自start到结尾的所有字符
console.log(string.substr(start,length));

// 给字符串外层加一个<small>标签
console.log(string.small()); // <small>string</small>

// 把一个字符串分割成字符串数组。
// separator: （必须）字符串或正则表达式，从该参数指定的地方分割 string。
// howmany: （可选）该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
console.log(string.split(separator,howmany));

// 用于检测字符串是否以指定的子字符串开始。是以指定的子字符串开头返回 true，否则 false。
// startsWith() 方法对大小写敏感。
// searchvalue: (必须) 要查找的字符串。
// start: (可选) 查找的开始位置，默认为 0。
console.log(string.startsWith(searchvalue, start));

// 给字符串外层加一个<strike>标签
console.log(console.log(string.strike())); // <strike>string</strike>

// 给字符串外层加一个<sub>标签
console.log(string.sub()); //<sub>string</sub>

// 用于把字符串转换为小写。
console.log('STRING'.toLocaleLowerCase()); // string
console.log('STRING'.toLowerCase()); // string

// 用于把字符串转换为大写。
console.log('string'.toLocaleUpperCase()); // STRING
console.log('string'.toUpperCase()); // STRING

// 没有继承Object类的toString，重写了toString()方法
console.log('string'.toString());

// 去除字符串两端空格。
console.log('string'.trim());

// 去除字符串左边空格。
console.log('string'.trimLeft());

// 去除字符串右边空格。
console.log('string'.trimRight());

// 移除原字符串头部空白字符后的新字符串，不会改变原字符串
console.log('string'.trimStart());

// 移除原字符串尾部空白字符后的新字符串，不会改变原字符串
console.log('string'.trimEnd());

// 方法返回一个String对象的原始值。String 对象的 valueOf 方法返回一个String对象的原始值。
// 该值等同于String.prototype.toString()。
console.log('string'.valueOf()); // string

1.【indexOf()】与【includes()】的区别

indexOf()和includes()都是用来判断数组或字符串是否包含传入的参数，不同的是indexOf()如果包含，则会返回该字符首次出现的位置，而includes()只会返回true、false。

indexOf()判断使用的是严格相等模式进行比较。 a === b

let array = [1,2,3,4,5];
console.log(array.indexOf(2)); // 1
console.log([{name: 'John'},{name : 'John'}].indexOf({name:'John'})); // -1
console.log([[1],[2],[3],[4]].indexOf([3])); // -1
console.log("abcdefgh".indexOf('e')); // 4

indexOf()不能处理NaN的数据。includes介意处理NaN的数据。例如：

let arr = [NaN];
console.log(arr.indexOf(NaN)); // -1
console.log(arr.includes(NaN)); // true

vue3对【indexOf、lastIndexOf、includes】做了封装，源码如下

// 它们三个由于第二个参数的存在，可能不会从数组的第一个元素开始遍历。
/* 这导致的问题是当数组的某一项发生变化时不会响应式的重新执行这三个 api，
（这里暗含的就是第二个参数可能是会变动的）所以 vue3 就包装了这三个方法，
在执行这三个方法时就去将其注册到每一项的依赖中去，
这样子保证了不论在什么情况下都会在响应式数组更新项时去更新依赖。
*/
const arrayInstrumentations: Record = {} 
;['includes', 'indexOf', 'lastIndexOf'].forEach(key => { 
  arrayInstrumentations[key] = function(...args): any {
    const arr = toRaw(this) as any
    for (let i = 0, l = (this as any).length; i < l; i++) {
      track(arr, TrackOpTypes.GET, i + '')
    }
    const res = arr[key](...args)
    if (res === -1 || res === false) {
      return arr[key](...args.map(toRaw))
    } else {
      return res
    }
  }
})

?2.【localeCompare()】方法，主要说一下针对中文的排序

localCompare根据我们的中文系统，把汉字先转换成了拼音，再进行了比较；对于同拼音的汉字，js再根据声调进行比较。

// 在没有出现意外的情况下，各个支持 localeCompare 的浏览器都很正常。
// 最近将 Chrome 更新到 58.0.3029.110，突然发现中文排序不正常。
// 正常应该返回 1, 拼音 jia 在前, kai 在后
'开'.localeCompare('驾'); // 得到-1;

// Chrome 58.0.3029.110 下返回 -1, 其他浏览器正常

// 确认之后是 localeCompare 需要明确指定 locales 参数
'开'.localeCompare('驾', 'zh'); // 得到1

3.【match()】方法说明，参考链接https://juejin.cn/post/6844903721596370957

match(regExp: string | RegExp): RegExpMatchArray | null

match方法接受传递一个参数regExp，这个regExp可以字符串或者正则表达式。返回的正则匹配后的结果的数组，如果什么也没匹配到的话，返回的就是null

如果传递的参数regExp是一个字符串的话，match方法会先把它变成正则表达式(即new RegExp(regExp))然后在按照证明表达式进行匹配，此时相当于执行的是recevier.match(new RegExp(regExp))

?4.ES6新增的【padStart()】方法和【padEnd()】方法

// 老方法
let date = new Date()
let month = date.getMonth() + 1, day = date.getDate();
console.log(`${date.getFullYear()}-${(month >= 10 ? month : ('0'+month))}-${(day >=10 ? day : ('0'+day))}`);

// 处理时间时，不需要再判断月份和日期是否小于10，小于要在前面加上0，
// 使用padStart(2,'0')的方法，如果小于10的情况下自动在字符前面补0，变成2位数
let date = new Date()
let month = date.getMonth() + 1, day = date.getDate();
console.log(`${date.getFullYear()}-${String(month).padStart(2,'0')}-${String(day).padStart(2,'0')}`);
// 2021-08-21

5.【slice()】、【substring()】、【substr()】方法的区别

slice()可以两个参数即可以是整数，也可以是负数，substring()只可以传正数，而slice与substr()不同的是slice()使用两个字符位置来定义一个字符串，substr()使用一个字符位置一个长度来定义一个字符串。

const string = 'string';
console.log(string.slice(-5, -1));   // trin
console.log(string.substring(1, 5)); // trin
console.log(string.substr(-6,5))     // strin