大前端技术生态体系

切换至深色主题

String 字符串 ​

重要通知

类目简介

基本概况 ​

JavaScript 中的字符串是一串Unicode 字符序列。它们是一串UTF-16编码单元的序列，每一个编码单元由一个 16 位二进制数表示。每一个Unicode字符由一个或两个编码单元来表示。

字符串字节 ​

字符串宽度 ​

String对象 ​

创建字符串 ​

let str = new String("Hello World!");  
let str = "Hello World!";  
console.log(str.length);

计算字符串长度 ​

const str = '';
console.log(str.length);
  • 计算字符串字节
const str = '';
const strArray = str.split('');
let strSize = 0;
for (let i = 0; i < strArray.length; i++) {
  if (strArray[i]charCodeAt(0) < 299) {
    strSize++;
  } else {
    strSize += 2；
  }
}
console.log(strSize);

JavaScript 特殊字符 ​

String 对象方法 ​

String HTML 包装方法 ​

String字符串属性 ​

String.constructor ​

对创建该对象的函数的引用

String.length ​

字符串的长度

String.prototype ​

允许您向对象添加属性和方法

String字符串方法 ​

String.charAt() String.charCodeAt() String.codePointAt() String.concat() String.constructor() String.endsWith() String.fixed() String.includes() String.indexOf() String.lastIndexOf() String.localeCompare() String.match() String.matchAll() String.normalize() String.padEnd() String.padStart() String.repeat() String.replace() String.search() String.slice() String.split() String.startsWith() String.substr() String.substring() String.toLocaleLowerCase() String.toLocaleUpperCase() String.toLowerCase() String.toString() String.toUpperCase() String.trim() String.trimEnd() String.trimLeft() String.trimRight() String.trimStart() String.valueOf() String.Symbol(Symbol.iterator)

String.toString() ​

返回字符串对象中的字符串值, n 表示进制数, 默认为十进制

console.log(new String("0").charCodeAt().toString(2));

str.valueOf() ​

返回字符串对象的原始值

var boo = new Boolean(false);
document.write(boo.valueOf());  //输出：false

[String].charAt() ​

返回字符串中的第index个字符(从0开始)，若超出范围，则返回一个空字符串。

let info = str.charAt(3);
console.log(info);  //l

String.codePointAt() ​

[string].charCodeAt() ​

返回字符串中的第Index个字符的Unicode码（中文）与ASCII编码（非中文，十进制）。

console.log((' ').charCodeAt(0));  // 32
console.log(('0').charCodeAt(0));  // 48
console.log(('A').charCodeAt(0));  // 65
console.log(('a').charCodeAt(0));  // 97
console.log(('你').charCodeAt(0));  // 20320

String.fromCharCode() ​

将Unicode编码或ASCII编码转为字符。属于静态方法，由构造函数String()创建，而不是由字符串或字符串对象创建

console.log(String.fromCharCode(20320));  // 你

for(let i = 97; i < 123; i++) {
  console.log(String.fromCharCode(i));  //生成a~z 26个小写字母
}  
for(let i = 65; i < 91; i++){
  console.log(String.fromCharCode(i));  // 生成A~Z 26个大写字母
}

parseInt() ​

可解析一个字符串，并返回一个整数；如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

String.normalize() ​

[String].indexOf() ​

返回子字符串substr在字符串str中从startindex位置开始第一次出现的位置(默认从0开始)，若不存在，返回-1。

  let info = str.indexOf("o");
  console.log(info);  //4

[String].lastIndexOf() ​

返回子字符串substr在字符串str中startindex位置计算倒数第一次出现的位置(从开头0起，以匹配的最后一个字符位置)，若不存在，返回-1。

  let info = str.lastIndexOf("W");
  console.log(info);  //6

[String].match() ​

返回字符串或正则表达式的匹配，若匹配成功，返回匹配成功的字符串组成的数组，否则返回null。

  let info = str.match("Wor");  //匹配字符串
  let reg1 = str.match(/l/);  //匹配正则
  let reg2 = str.match(/l/g);  //匹配正则

  console.log(info);  //["Wor", index: 6, input: "Hello World", groups: undefined]
  console.log(reg1);  //["l", index: 2, input: "Hello World", groups: undefined]
  console.log(reg2);  //["l", "l", "l"]

[String].matchAll() ​

ES 提案, 给定一个字符串和一个正则表达式，.matchAll（）为所有匹配的匹配对象返回一个迭代器 RegExp：匹配正则；string：匹配字符串

let name = '这是演示字符串';
console.log(name.matchAll());

[String].replace() ​

以正则表达式或字符串形式匹配内容的结果。

let info = str.replace("World", "You");
let reg = str.replace(/\s/, "A");
console.log(info);  //Hello You
console.log(reg);  //HelloAWorld

//函数
String.replace(reg, functioon() {
  return '';
});

查找字符串或正则表达式相匹配的子字符串，如果在字符串中包含匹配的子字符串，返回子字符串第1次出现在字符串中的位置，从0开始；若不存在，否则返回-1。

  let info = str.search("W");
  let reg = str.search(/\s/);
  console.log(info);  //6
  console.log(reg);  //5

[String].slice() ​

返回在字符串str中起始位置startindex(包括)与末尾位置endindex(不包括)之间的子字符串，省略endindex则默认为到字符串结尾。

  let info = str.slice(2,4);
  console.log(info);  //ll

[String].substr() ​

返回字符串str从startindex（包括）位置指定的length长度子字符串。

  let info = str.substr(2,2);
  console.log(info);  //ll

[String].substring() ​

返回字符串str从startindex(包括)开始到endindex（不包括）结束之间的子字符串，startindex与endindex相等时，返回“”。

  let info = str.(str.substring(2,4));
  console.log(info);  //ll

[String].toLocaleLowercase() ​

将字符串转换为小写，按照本地方式转换

let info = str.();
console.log(info);  //

[String].toLowerCase() ​

将字符串转换为小写

let info = str.();
console.log(info);  //

[String].toLocaleUpperCase() ​

将字符串转换为大写，按照本地方式转换

let info = str.();
console.log(info);  //

[String].toUpperCase() ​

将字符串转换为大写

let info = str.();
console.log(info);  //

[String].concat() ​

连接两个或更多字符串，并返回新的字符串

let a = "Hello";
let b = " World!";

console.log(a.concat(b));

str.localeCompare(str1) ​

用本地特定顺序来比较两个字符串，若str小于str1，返回小于0的数；等于str1，返回0；反之，返回大于0的数

[String].split() ​

把字符串分割为字符串数组 RegExp | string：分割字符串的正则规则或子字符串规则

console.log(name.split(/\d/g));  //[ '这是演示字符串' ]
console.log(name.split(""));   //[ '这', '是', '演', '示', '字', '符', '串' ]

String.split(regexp, [limit]);
//regexp：字符串或正则表达式
//limit：指定返回数组的最大长度

var str="How are you doing today?"
document.write(str.split(" ") + "<br />")  //输出：How,are,you,doing,today?
document.write(str.split("") + "<br />")  //输出：H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
document.write(str.split(" ",3))  //输出：How,are,you

[string].trim() ​

从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR等）。

let name = '  这    是演示字符串   ';
console.log(name.trim());

// 兼容旧环境
if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  };
}

[string].trimStart() ​

从字符串的开头删除空格。trimLeft() 是此方法的别名。

[string].trimLeft() ​

[string].trimEnd() ​

从一个字符串的末端移除空白字符。trimRight() 是这个方法的别名。

[string].trimRight() ​

String.Symbol() ​

let name = '这是演示字符串';
console.log(name.);

ES6新增API ​

模板字符串 ​

let name = ``;

变量和表达式 ​

console.log(`${name}`);
let count = 0;
console.log(`${count + 1}`);

函数 ​

function add() {return 1;}
console.log(`${add()}`);

String.includes() ​

返回布尔值，判断是否找到参数字符串 string：需要查找的子字符串

let name = '字符串';
console.log(name.includes("符"));  //true

String.startsWith() ​

返回布尔值，判断参数字符串是否在原字符串的头部 string：需要查找的子字符串

let name = '字符串';
console.log(name.startsWith("字"));  //true

String.endsWith() ​

返回布尔值，判断参数字符串是否在原字符串的尾部 string：需要查找的子字符串

let name = '字符串';
console.log(name.endsWith("串"));  //true

String.padEnd() ​

返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串 minLength：指定生成的字符串的最小长度 string：用来补全的字符串，默认为空格，且空位

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

String.padStart() ​

返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串 minLength：指定生成的字符串的最小长度 string：用来补全的字符串，默认为空格，且空位

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

String.repeat() ​

复制字符串指定次数，并将它们连接在一起返回，n：指定重复次数

let name = '字符串';
console.log(name.repeat(2));  //'字符串字符串'

String HTML 包装方法 ​

HTML 返回包含在相对应的 HTML 标签中的内容，以下方法并非标准方法，所以可能在某些浏览器下不支持

String.anchor(name) ​

创建 HTML 锚。

String.big() ​

用大号字体显示字符串。

显示闪动字符串。

String.bold() ​

使用粗体显示字符串。

String.fixed() ​

以打字机文本显示字符串。

String.fontcolor() ​

使用指定的颜色来显示字符串。

String.fontsize() ​

使用指定的尺寸来显示字符串。

String.italics() ​

使用斜体显示字符串。

将字符串显示为链接。

String.small() ​

使用小字号来显示字符串。

String.strike() ​

用于显示加删除线的字符串。

String.sub() ​

把字符串显示为下标。

String.sup() ​

把字符串显示为上标。

​

​

​

疑难困惑 ​

​

​

业务场景实践 ​

​

​

Released under the MIT License.

焰光实验室版权所有 | Copyright © 2022-present 王军