JavaScript字符串概述

Posted 2022-02-12 橘猫吃不胖～

javascript字符串概述

• 1 创建字符串
• 2 单、双引号
• 3 转义字符串
• 4 默认属性
• 5 访问字符串中的字符
• 6 字符串拼接
• 7 根据字符返回位置
• 8 根据位置返回字符
• 9 字符串操作方法
• 10 判断字符串中是否含有某个字符includes()
• 11 填充字符串padStart()

1 创建字符串

直接创建：

var 变量名 = "字符串";

通过String对象创建

var 变量名 = new String("字符串");

2 单、双引号

字符串是指计算机中用于表示文本的一系列字符，在JavaScript中使用单引号或双引号来包裹字符串。

var str1 = '单引号字符串';
var str2 = "双引号字符串";

单、双引号可以相互嵌套，在单引号字符串中可以直接书写双引号，在双引号字符串中也可以直接书写单引号。

var str1 = 'I am a "programmer"';// 单引号嵌套双引号
var str2 = "I'm a 'programmer'";// 双引号嵌套单引号

下面是错误用法：

var str1 = 'I'm a programmer'; // 单引号错误用法
var str2 = "I'm a "programmer""; // 双引号错误用法
var str3 = 'I am a programmer";	// 单双引号混用

3 转义字符串

转义符：在字符串中使用换行、Tab等特殊符号时，可以用转义符来进行转义，转义符以“\\”开始。常见转义符见下表。

转义符	解释说明
\\’	单引号
\\"	双引号
\\n	换行，n表示newline
\\v	跳格（Tab、水平）
\\t	Tab符号
\\r	CR换行
\\f	换页
\\\\	反斜线（\\）
\\b	退格,b表示blank
\\0	Null字节
\\xhh	由2位十六进制数字hh表示的ISO-8859-1字符。如“\\x61”表示“a”
\\uhhhh	由4位十六进制数字hhhh表示的Unicode字符。如“\\u597d”表示“好”

4 默认属性

字符串默认的属性：length，用来记录字符串的长度，使用方式：

字符串变量名.length

示例：

var str = new String("橘猫吃不胖");
console.log(str.length);// 5

5 访问字符串中的字符

字符串可以使用“[index]”语法按照index（索引）访问字符，index从0开始，一直到字符串的长度减1，如果超过了index最大值，会返回undefined。

var str = 'I\\'m a programmer';
console.log(str[0]);    // 输出结果：I
console.log(str[1]);    // 输出结果：'
console.log(str[15]);   // 输出结果：r
console.log(str[16]);   // 输出结果：undefined

6 字符串拼接

多个字符串之间可以使用“+”进行拼接，如果数据类型不同，拼接前会把其他类型转成字符串，再拼接成一个新的字符串。

var str = 'I\\'m a programmer';
console.log('a' + 'b');   // ab
console.log('a' + 18);    // a18
console.log('_' + true);  // _true
console.log('12' + 14);   // 1214
console.log(12 + 14);     // 两个数字相加，结果为26

7 根据字符返回位置

字符串对象提供了用于检索元素的属性和方法，字符串对象的常用属性和方法如下：

方法	功能描述
indexOf(searchValue)	获取searchValue在字符串中首次出现的位置若返回-1，表示未找到value
lastIndexOf(searchValue)	获取searchValue在字符串中最后出现的位置

示例：

var str = new String("橘猫吃不胖");
console.log(str.indexOf("不"));// 3

var str = new String("橘猫吃不胖");
console.log(str.indexOf("不1"));// -1，如果结果是-1，表明未找到value

var str = new String("橘猫吃不胖橘猫吃不胖");
console.log(str.lastIndexOf("吃"));// 7

【案例】在一组字符串中，找到所有“o”出现的位置以及次数。字符串为 ’ Hello World, Hello JavaScript '。

var str = "Hello World!Hello JavaScript!";
var index = str.indexOf("o");//找到o第一次出现的位置
var num = 0;//定义一个计数器num为0
while (index != -1) 
    console.log(index);
    index = str.indexOf("o", index + 1);//继续找下一个o
    num++;

console.log("出现的次数", num);

8 根据位置返回字符

字符串对象提供了用于获取字符串中的某一个字符的方法。方法如下：

方法	功能描述
charAt(index)	获取index位置的字符，位置从0开始计算
charCodeAt(index)	获取index位置的字符的ASCII码
str[index]	获取指定位置处的字符（html5新增），格式为：对象名.属性名或者对象名[属性名]

常用的ASCII如下：

元素	ASCII码
0	48
a-z	97-122
A-Z	65-90
空格	32

示例：

var str = "Hello World!Hello JavaScript!";
console.log(str.charAt("9"));// l

var str = "Hello World!Hello JavaScript!";
console.log(str.charCodeAt(9));// 108

【案例】统计出现最多的字符和次数

var str = "Apple";
var o = ;//定义一个空对象
for (var i = 0; i < str.length; i++) 
    var chars = str.charAt(i);//获取i位置的字符，并赋值给chars
    if (o[chars]) //表示对象o中存在chars
        o[chars]++;
     else 
        o[chars] = 1;
    

console.log(o);//  A: 1, p: 2, l: 1, e: 1 

9 字符串操作方法

字符串对象提供了一些用于截取字符串、连接字符串、替换字符串的属性和方法。字符串对象的常用属性和方法如下：

方法	作用
concat(str1, str2, str3…)	连接多个字符串
slice(start,[ end])	截取从start位置到end位置之间的子字符串，若没有参数end,则截取start到串末尾的字符串，可以接受复数
substring(start[, end])	截取从start位置到end位置之间的一个子字符串，基本和slice相同，但是不接收负值
substr(start[, length])	截取从start位置开始到length长度的子字符串
toLowerCase()	获取字符串的小写形式
toUpperCase()	获取字符串的大写形式
split([separator[, limit])	使用separator分隔符将字符串分隔成数组，limit用于限制数量
replace(str1, str2)	使用str2替换字符串中的str1，返回替换结果，只会替换第一个字符

示例：concat()

var s1 = "abc";
var s2 = "def";
var s3 = "123";
console.log(s1.concat(s2, s3));// 结果为：abcdef123

示例：slice()

var str="javascript程序设计";
//截取从索引为4到串末尾的字符
console.log(str.slice(4));// script程序设计
//截取4至9之间的字符
console.log(str.slice(4, 9));// scrip
console.log(str.slice(-5,-3));// t程

示例：substr()

var str = "javascript程序设计";
console.log(str.substr(0,10));// javascript

示例：toLowerCase()

var str = "Javascript程序设计";
console.log(str.toLowerCase());// javascript程序设计

示例：toUpperCase()

var str = "javascript程序设计";
console.log(str.toUpperCase());// JAVASCRIPT程序设计

示例：split()

var phone = "135-1234-5678";
var arr = phone.split("-");
arr.forEach(elem => 
    console.log(elem);
)

示例：replace()

var str = "javascript程序设计";
console.log(str.replace("java", "Action"));// Actionscript程序设计

10 判断字符串中是否含有某个字符includes()

includes() 方法用于判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false。

语法：

str.includes(searchString[, position])

searchString：要在此字符串中搜索的字符串。
position：可选，从当前字符串的哪个索引位置开始搜寻子字符串，默认值为 0。

注意：includes() 方法是区分大小写的。例如，下面的表达式会返回 false ：

'Blue Whale'.includes('blue'); // returns false

示例：

var str = 'To be, or not to be, that is the question.';

console.log(str.includes('To be'));       // true
console.log(str.includes('question'));    // true
console.log(str.includes('nonexistent')); // false
console.log(str.includes('To be', 1));    // false
console.log(str.includes('TO BE'));       // false

11 填充字符串padStart()

padStart() 方法用另一个字符串填充当前字符串(如果需要的话，会重复多次)，以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充。

语法：

str.padStart(targetLength [, padString])

targetLength：当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
padString：可选，填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的默认值为 " "（U+0020）。

返回值：在原字符串开头填充指定的填充字符串直到目标长度所形成的新字符串。

示例：

'abc'.padStart(10);         // "       abc"
'abc'.padStart(10, "foo");  // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0");     // "00000abc"
'abc'.padStart(1);          // "abc"