javascripts填充字符串 js字符串添加

前面一章主要复习了数组的所有方法，今天我们开始来研究一下字符串的方法吧。

一、 es5的字符串方法

1.1、 字符串新建

• new方法新建
• toString方法转化
• 数组的join
• 字面量定义
• length：字符串的长度

关于字符串新建这相对比较简单，我就界面上面几种方式，当然还有很多方式啊。推荐使用数组字面量的方式来新建字符串。

var str = "hello world";

var str = new String("wo shi klivitam");

var str = ["wo","shi","shui"].toString();

var str = ["wo","shi","shui"].join("");

console.log(str.length) // 9
复制代码

1.2、 字符串与char

• charAt:将 this 对象转换为一个字符串，返回包含了这个字符串 pos 位置的字符的字符串。如果那个位置没有字符，返回空字符串。返回结果是个字符串值，不是字符串对象。
• charCodeAt:将 this 对象转换为一个字符串，返回一个代表这个字符串 pos 位置字符的代码单元值的数字（小于 216 的非负整数）。如果那个位置没有字符，返回 NaN。
• fromCharCode: 返回一个字符串值，包含的字符数与参数数目相同。每个参数指定返回字符串中的一个字符，也就是说第一个参数第一个字符，以此类推（从左到右）

关于这个，其实也有很多的作用，来看下面一段代码：

var str = "hello world";

for(var i=0;i<str.length;i++){
	console.log("charAt:",str.charAt(i),",charCodeAt:",str.charCodeAt(i));
}
// charAt: h ,charCodeAt: 104
// charAt: e ,charCodeAt: 101
// charAt: l ,charCodeAt: 108
// charAt: l ,charCodeAt: 108
// charAt: o ,charCodeAt: 111
// charAt:   ,charCodeAt: 32
// charAt: w ,charCodeAt: 119
// charAt: o ,charCodeAt: 111
// charAt: r ,charCodeAt: 114
// charAt: l ,charCodeAt: 108
// charAt: d ,charCodeAt: 100

复制代码

上面我们可以查询到，char的unicode值，此时我们再用这些unicode的值利用fromCharCode来创建String，如下面代码所示：

var str = String.fromCharCode(104,101,108,108,111);
console.log(str); // hello
复制代码

1.3、 字符串查找

• indexOf： 在给点字符串呢查找出现第一个子串的位置，如果找不到返回-1
• lastIndexOf:在给点字符串呢查找最后一个出现子串的位置，如果找不到返回-1
• search：意思跟indexOf类似，唯一有差距的是 传参是正则表达式
• match：该方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。返回值是查找到的数组哦。 关于这个方法的使用如下所示：

关于字符串的查找就相对比较简单了，来看下面一段代码：

var str = "hello world";

console.log(str.indexOf("l")); // 2
console.log(str.lastIndexOf("l")); // 9
console.log(str.search(/l/)); // 2

console.log(str.indexOf("k")); // -1
var str="The rain in SPAIN stays mainly in the plain"; 
var n=str.match(/ain/g); // [ 'ain', 'ain', 'ain' ]
复制代码

关于正则表达式这一块，我今晚在这篇文章写完之后 另开出一章来写

1.4、 字符串大小写转换

• toLowerCase/toLocaleLowerCase：将字符串中的大写转化成等价的小写
• toUpperCase/toLocaleUpperCase：将字符串中的小写转化成等价的大写

大小写转换的一个方法，/后面的方法和前面的方法 大同小异，我上网查询了一下，可能在土耳其啥的语言上有点不一样。具体的效果看下面一段代码

var str = "hello WORLD";
console.log(str.toUpperCase()) // HELLO WORLD

console.log(str.toLowerCase()) // hello world
复制代码

1.5、 字符串截取与拼接

• concat：字符串的拼接

var str = "hello";
var srr1 ="world";

var str2 = str.concat(" ","world");
console.log(str2); // hello world
复制代码

如上所示，该方法接收n个字符串，会将所有字符串组合成一个新的字符串。

• replace：将字符串中的字串替换成给定的字串。

var str = "hello world";
var str1 = str.replace("l","L");
console.log(str1) // heLlo world
console.log(str) //  hello world
复制代码

这里值得我们注意的是：replace只能替换第一个字符串的位置，做Android的都是知道，Android里面有一个replaceAll方法，但是js没有实现，js应该如何实现呢？

var str = "hello world";
var str1 = str.replace(/l/g,"L");
console.log(str1) // heLLo worLd
console.log(str) //  hello world
复制代码

从上面代码我们可以知道，replace第一个参数其实是正则表达式，关于正则，跟前面一样 我今晚会写一篇文章来复习这个内容，这里就不再讲解了。

• slice：slice ，返回这个字符串中从 start 位置的字符到（但不包含）end 位置的字符的一个子字符串（或如果 end 是 undefined，就直接到字符串尾部）

var str = "hello world";

console.log(str.slice(0,5)); // hello
console.log(str.slice(-5)); // world
console.log(str.slice(0,100)); // hello world
复制代码

这里值得我们注意的点是： 1、 该方法需要两个参数 start 和 end 2、 如果end大于字符串的长度，end默认为字符串的长度 3、 如果存在负数，则代码字符串长度加上负数为该参数

• split：该方法用于把一个字符串分割成字符串数组

var str = "hello world";

var arr1 = str.split(""); // [ 'h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd' ]
var arr2 = str.split("o");// [ 'hell', ' w', 'rld' ]
var arr3 = str.split("",3) // [ 'h', 'e', 'l' ]
复制代码

这里值得注意的是：aplit接收两个参数，第一个参数是表示从该参数指定的地方开始分割，第二个参数是指定返回数组的长度。

• substring：该方法用于截取字符串的给定字串

var str = "hello world";

console.log(str.substring(0,5)); // hello
console.log(str.substring(0,1000)); // hello world
复制代码

主力值得注意的是：substring 方法需要两个参数 start 和 end，，返回包含在转换结果字符串中从 start 位置字符一直到（但不包括）end 位置的字符（或如果 end 是 undefined，就到字符串末尾的一个子串。

• trim： 该方法去除字符串开头和结尾的空格

var str1 =  "     hello world     1 ";
var str2 = str1.trim()
console.log(str2); // hello world     1
console.log(str1); //      hello world     1 
复制代码

值得注意的是，该方法只能去除开头和结尾的空格，不能去除所有的空格哦。

二、 es5后的字符串方法

2.1、 字符串的查找

• includes： 返回布尔值，表示是否找到了参数字符串。
• startsWith：返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith：返回布尔值，表示参数字符串是否在原字符串的尾部。

let str = 'Hello world!';

str.startsWith('Hello') // true
str.endsWith('!') // true
str.includes('o') // true
str.startsWith('world', 6) // true
str.endsWith('Hello', 5) // true
str.includes('Hello', 6) // false
复制代码

从上面我们可以发现，这三个方法都能接收两个参数，第一个是用来匹配的参数 第二个则是用来定位到查找的位置。但endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

2.2、 字符串的拼接

• repeat：该方法返回一个新字符串，表示将原字符串重复n次

'hello'.repeat(2); // "hellohello"
'na'.repeat(0); // ""
'he'.repeat(2.9); // "hehe"
'hello'.repeat(Infinity); // RangeError
'hello'.repeat(-1); // RangeError
'na'.repeat(NaN) // ""
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"
复制代码

这里值得我们注意的是： 1、 参数如果是小数，会被取整 2、 如果repeat的参数是负数或者Infinity，会报错 3、 参数NaN等同于 0。 4、 参数是字符串，则会先转换成数字。

• padStart/padEnd：如果某个字符串不够指定长度，会在头部或尾部补全

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '
复制代码

这里值得注意的是： 1、该方法接收两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串 当第二个参数被省略的时候，默认用空格填充 2、 如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串。 3、 如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。

• 模版字符串 我们知道，在es6以前的语法，字符串的拼接一般都采用：

var fristStr = "dadasdas"
var secondStr = "bbjbj"
var str = fristStr +secondStr;
复制代码

在es6中，其实新定义了一种字符串拼接的方式：模版字符串``

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

上面的代码我们就可以简单的写成：

var str = `${fristStr} +${secondStr}`;
复制代码

设置里面都还可以做一些运算

var a1 = 1;
var a2 = 2;
console.log(result) // a1+a2 = 3
复制代码

关于模版字符串，肯定还有更多、更细致的用法，我这里就不做具体的举例了。怎么说了，有些奥妙只有自己在实际使用中才能领会的。

说在最后

关于字符串的使用，这一篇文章把我在开发中经常能用到的一些方法都做了一次总结 怎么说呢？也没几个方法。掌握、记忆起来还是比较简单的，其实最难的无非就是正则表达式哪一块，现在中午也没什么时间了，我就不多说了 先睡会儿觉 等今晚下班了，再来细细的探究所谓的正则表达式吧。