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

登录后复制

let str = "字符串的内容"

• 1.

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

模板字符串 ``

ES6 新增语法

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

登录后复制

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

• 1.
• 2.

转义字符

字符名称	转义写法	功能 / 范例
单引号	\'	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);
}

• 1.
• 2.
• 3.

字符串替换 replace

登录后复制

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

• 1.

登录后复制

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

• 1.
• 2.

通常配合正则表达式使用

登录后复制

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

• 1.
• 2.

字符串拼接（三种方式）

登录后复制

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

• 1.
• 2.

方式1：模板字符串

登录后复制

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

• 1.

方式2：+

登录后复制

let result = str1 + str2;

• 1.

方式3：concat

登录后复制

let result = str1.concat(str2);

• 1.

【实战】字符串中加换行

登录后复制

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

• 1.

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

登录后复制

"white-space":"pre"

• 1.

字符串搜索

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

第一个参数是目标字符串

登录后复制

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

• 1.

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

登录后复制

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

• 1.

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

第一个参数是目标字符串

登录后复制

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

• 1.

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

登录后复制

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

• 1.

未搜索到返回 -1

lastIndexOf 从后向前搜索

正则搜索 search()、match()

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

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

登录后复制

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

• 1.

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

登录后复制

// 字符串获取指定字符的所有下标
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;
  }
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.

字符串截取 substring / slice

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

登录后复制

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

• 1.

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.

登录后复制

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

• 1.

登录后复制

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

• 1.
• 2.

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

获取字符串的字符数

登录后复制

‘123’.length // 3

• 1.

获取字符串的存储长度

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

登录后复制

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;
            }
        }
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.

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

字符串的显示宽度和 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;
    }

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.

【实战】Unicode 编码转字符

登录后复制

String.fromCharCode(72);  // H

• 1.

【实战】字符串转为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())

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

结果

登录后复制

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

• 1.
• 2.
• 3.
• 4.
• 5.

【实战】使用 Lodash

 https://www.lodashjs.com/docs

原创作者: u_15715491 转载于: https://blog.51cto.com/u_15715491/11457355