JS 【详解】字符串（含模板字符串、转义字符、常用字符串API汇总、常用字符串操作详解、获取字符串的三种长度、Unicode 编码转字符、字符串转为html 、使用 Lodash 等）-CSDN博客

本文链接：https://blog.csdn.net/weixin_41192489/article/details/140371785

let str = "字符串的内容"

用单引号/双引号包裹
以字符数组的形式保存，字符串"ab"在底层是以 [“a”, “b”] 的形式保存。

模板字符串 ``

ES6 新增语法

用反引号包裹
变量、表达式、函数写在 ${} 中

let score = 100
console.log(`考试得了${score}分`) // 考试得了100 分

转义字符

字符名称	转义写法	功能 / 范例
单引号	`\'`	I don’t know
双引号	`\"`	“Hello”, he said
反斜杠	`\\`	1\2
回车符	`\r`	将当前位置移到本行开头
换行符	`\n`	将当前位置移到下一行开头
换页符	`\f`	将当前位置移到下一页开头
水平制表符	`\t`	按下键盘TAB键效果
垂直制表符	`\v`	让 `\v` 后面的字符从下一行开始输出，且开始的列数为 `\v` 前一个字符所在列后面一列。
退格符	`\b`	将当前位置移到前一列
Unicode 标识符	`\u`	\u 后面的字符将会被视为Unicode码

常用 API

全无副作用 : 都不会改变原字符串

API名称	功能	参数	返回值	副作用
trim	去除字符串前后的空字符	无	新字符串	无
replace	替换字符串指定内容	匹配规则，替换的字符串	新字符串	无
concat	字符串拼接	拼接的字符串	新字符串	无
repeat	重复字符串	重复次数	新字符串	无
toUpperCase	字符串大写	无	新字符串	无
toLowerCase	字符串小写	无	新字符串	无
charAt	获取指定位置的字符功能同 [ ]	下标	指定位置的字符	无
includes	是否包含指定字符串	目标字符串	true/false	无
indexOf	获取指定字符串下标	目标字符串	下标/-1	无
lastIndexOf	获取指定字符串下标从后向前搜索	目标字符串	下标/-1	无
startsWith	是否以指定字符串开头	目标字符串	true/false	无
endsWith	是否以指定字符串结尾	目标字符串	true/false	无
substring	字符串截取	起始下标，终点下标	截取后的字符串	无
slice	字符串截取与 substring 的区别见下文	起始下标，终点下标	截取后的字符串	无
split	字符串分割	分割符，最大长度	分割后的数组	无

常用字符串操作【详解】

遍历字符串 for of

for(let char of string){
	console.log("字符："+char);
}

字符串替换 replace

replace(匹配目标字符串的规则，新字符串)

// 将第 1 个 1 替换为 4
let result = "1 1 3".replace("1", "4");

通常配合正则表达式使用

// 去除字符串内所有的空格
let result = "1 2 3".replace(/\s*/g, "");

字符串拼接（三种方式）

let str1 = "EC编程";
let str2 = "俱乐部";

方式1：模板字符串

let result = `${str1}${str2}`;

方式2：+

let result = str1 + str2;

方式3：concat

let result = str1.concat(str2);

【实战】字符串中加换行

let str = 你好'+"\n"+ '世界';

html中是会被识别为"你好\n世界"，要实现换行，还需添加样式：

"white-space":"pre"

字符串搜索

查询指定字符/字符串是否存在 includes

第一个参数是目标字符串

"123".includes("3") // true

第二个参数是搜索起点的下标

"123".includes("3", 3) // false

获取指定字符/字符串的下标 indexOf / lastIndexOf

第一个参数是目标字符串

"123".indexOf("3") // 2

第二个参数是搜索起点的下标

"123".indexOf("3", 3); // -1

未搜索到返回 -1

lastIndexOf 从后向前搜索

正则搜索 search()、match()

https://blog.csdn.net/weixin_41192489/article/details/113618913

【实战】不区分大小写的搜索

目标字符串和被搜索的字符串都变为小写再搜索

str.toLowerCase().indexOf('A'.toLowerCase());

【实战】获取指定字符的所有下标

// 字符串获取指定字符的所有下标
export function getIndexList(string, char) {
  let arr = [];
  let index = -1;
  do {
    index = string.indexOf(char, index + 1);
    if (index != -1) {
      arr.push(index);
    }
  } while (index != -1);
  if (arr.length > 0) {
    return arr;
  } else {
    return -1;
  }
}

字符串截取 substring / slice

第一个参数指定是区间的起始位置（含头）
第二个参数指定是区间的末端位置，而不是该区间的长度。（不含尾）

"123".substring(1, 2); // 2

substring 和 slice 的区别

substring 将负值视为0，传参 (1,-1) 效果为substring(1,0)
slice 将负值与字符串的长度相加，传参 (1,-1) 效果为 slice(1,s.length-1)

字符串分割 split

第一个参数：字符串/正则表达式
第二个参数：指定返回的数组的最大长度

// 无参数，表示：把字符串作为一个元素添加到数组中。
"1,2".split() // [ '1,2' ]

"1,2".split(","); // [ '1', '2' ]

// 正则 /\s*/ 匹配0个或多个空格
"1  2 34".split(/\s*/); // [ '1', '2', '3', '4' ]

【实战】获取字符串的长度

获取字符串的字符数

‘123’.length // 3

获取字符串的存储长度

英文占一个字符位，其他字符占两个字符位

function getZFWlength(string) {
        var count = 0;
        for (var i = 0; i < string.length; i++) {
            //对每一位字符串进行判断，如果Unicode编码在0-127，计数器+1；否则+2
            if (string.charCodeAt(i) < 128 && string.charCodeAt(i) >= 0) {
                count++;
            } else {
                count += 2;
            }
        }
}

获取字符串的像素长度（显示宽度）

字符串的显示宽度和 css 的 fontSize，fontFamily有关。
计算思路：创建一个用span包裹的字符串标签，其 window.getComputedStyle的计算值 - offsetWidth 即字符串在页面中的显示宽度

若计算像素高度，原理相同，见注释部分

    // 获取字符串的像素宽度
    function getPXwidth(str, fontSize = "12px", fontFamily = "Microsoft YaHei") {
        var span = document.createElement("span");
        var result = {};
        result.width = span.offsetWidth;
        result.height = span.offsetHeight;
        span.style.visibility = "hidden";
        span.style.fontSize = fontSize;
        span.style.fontFamily = fontFamily;
        span.style.display = "inline-block";
        document.body.appendChild(span);
        if (typeof span.textContent != "undefined") {
            span.textContent = str;
        } else {
            span.innerText = str;
        }
        result.width = parseFloat(window.getComputedStyle(span).width) - result.width;
        // 字符串的显示高度
        // result.height = parseFloat(window.getComputedStyle(span).height) - result.height;
        return result.width;
    }

【实战】Unicode 编码转字符

String.fromCharCode(72);  // H

【实战】字符串转为html

let str = "你好";

console.log(str.anchor())
console.log(str.big())
console.log(str.sub())
console.log(str.sup())
console.log(str.link("http://www.baidu.com"));
console.log(str.bold())

结果

<a name="undefined">你好</a>
<big>你好</big>
<sub>你好</sub>
<sup>你好</sup>
<a href="http://www.baidu.com">你好</a>

【实战】使用 Lodash

https://www.lodashjs.com/docs