前端总结·基础篇·JS（一）原型、原型链、构造函数和字符串（String）

前端总结系列

前端总结·基础篇·CSS（一）布局
前端总结·基础篇·CSS（二）视觉
前端总结·基础篇·CSS（三）补充
前端总结·基础篇·JS（一）原型、原型链、构造函数和字符串（String）
前端总结·基础篇·JS（二）数组深拷贝、去重以及字符串反序和数组（Array）
前端总结·基础篇·JS（三）arguments、callee、call、apply、bind及函数封装和构造函数
前端总结·基础篇·JS（四）异步请求及跨域方案
前端总结·工具篇·管理（一）常用模块化方案



一、原型链

	1.1 原型（prototype）

	1.2 原型链（__proto__）

	1.3 构造函数（constructor）

二、字符串使用

	2.1 定义字符串

	2.2 使用字符串

三、常用技巧

	3.1 字频统计

四、方法列表

	4.1 转换

	4.2 修改

	4.3 匹配

	4.4 文本

	4.5 其他

一、原型链

更多有关原型链的思考，请见汤姆大叔的博客。

1.1 prototype（原型）

给原型添加属性和方法，需要添加在对象上。这些属性和方法，会被后代继承。实现继承还有其他方法，更多请见幻天芒的博客。



String.prototype.bibi = 'die'  // 原型是作用于对象String上的

var str = ''

console.log(str.bibi)

1.2 proto（原型链）

原型链中包含了此对象的所有方法。



var str = ''

console.log(str.__proto__)

1.3 constructor（构造函数）

构造函数是一类具有某些相同属性事物的集合。在创建对象的时候，会将传过来的参数赋值到对象自身的属性上。父类的静态属性和方法会被子类继承。



/* 定义汽车构造函数 */

var Car = function(brand){

  this.brand = brand

  this.type = 'Car'

}

var BMW = new Car('BMW')  // 创建BMW车型

console.log(BMW.brand)  // 显示品牌名

str.__proto__.constructor // function String() { [native code] }

str.__proto__.__proto__.constructor

二、字符串使用

2.1 定义字符串

字符串使用单引号或者双引号引起来。可以直接定义，也可以创建字符串对象。



var str = 'I See U.'  // 直接定义字符串并且复制给变量

var str = new String('I See U.')  // 创建字符串对象并赋值

2.2 使用字符串

字符串的下标从0开始，最后一个下标是字符串长度减1。访问字符串可以直接访问，或者对



console.log(str)  // 直接访问

console.log(str[0])  // 通过下标访问

三、常用技巧

3.1 字频统计

首先把字符串中的词库提取出来（可以将字符串转成数组，再去重）。在去重的同时可以把次数统计出来。去重的更多方法，请见前端网。call用来改变this的指向，方法请见每天进步一点点！。

统计结果为0次，就是一次。统计函数还有待改善。功能上无问题，细节上还得继续优化。例如，标点符号和空格应该过滤掉。或者强化一下，统计词频。



var wordCount = function(str){

	/* 提取字库 */

	var strSorted = str.split('').sort()  // 字符串转数组并排序

	var newArr = []  // 保存去重后的数据

	countArr = []  // 保存统计结果，下标为出现的次数

	/* 去重 */

	var nextCount = 0  // 定义是否抵达下一个新词

	var currentCount = 0  // 存储重复词的次数

	for(x in strSorted){

		if(strSorted[x]!==newArr[newArr.length-1]){

			nextCount = 1  // 标记已抵达新词

			newArr.push(strSorted[x])  // 去重后的数据保存到newArr

			if(Array.isArray(countArr[currentCount]) == false){

				countArr[currentCount] = []  // 防止包括，先定义为数组

			}

			Array.prototype.push.call(countArr[currentCount],strSorted[x-1])  // 把统计结果保存在CountArr

			// console.log('if / currentCount:'+currentCount) 调试计数器

			currentCount = 0  // 重置上一次的计数

  		}

		else{

			if(nextCount === 1){

				currentCount+=1  // 补上一个计数

				nextCount=0  // 重置抵达下一个的标记

			}

			currentCount+=1  // 计算器加一

		// console.log('else / currentCount:'+currentCount) 调试计数器

  		}

	}

	/* 展示数据 */

	for(var i = countArr.length-1;i>=0;i--){

		if(countArr[i]!==undefined){

			console.log('出现'+i+'次：'+countArr[i])

		}

	}

	return countArr

}

/* 使用函数 */

var str = '今天的天气还是不错的，不出去走走走走走？'  // 定义测试用字符串

wordCount(str)

四、方法列表

为方便阅读，有如下准则：

参数中的[]代表可选参数。如substr(start[,length])中，length为可选参数。
本文对常用API做了精准分类，更加便于阅读。
需要让某些浏览器支持某些新功能，，可以使用腻子脚本（Polyfill），详见[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/
Reference/Global_Objects/String)。

定义字符串str为'I Love Javascript.'。下面的测试代码将在此基础上进行。



var str = 'I Love Javascript.'

4.1 转换

字符串（通常在其他数据类型转换成字符串的时候用到）



* toString()（一般转换）

	str.toString()  // "I Love Javascript."

	[1,2,3].toString()  // "1,2,3" 数组转成字符串

* String(str)（强制转换）

	String(str)  // "I Love Javascript."

数组



split([separator[,limit]])（第一个参数为分离的规则，第二个参数为分离后的数组个数）

	str.split()  // [I Love Javascript.]

	str.split('')  // ["I", " ", "L", "o", "v", "e", " ", "J", "a", "v", "a", "s", "c", "r", "i", "p", "t", "."]

	str.split(' ')  // ["I", "Love", "Javascript."]

	str.split(' ',2)  // ["I", "Love"]

	str.split(/\s*/)  // ["I", "L", "o", "v", "e", "J", "a", "v", "a", "s", "c", "r", "i", "p", "t", "."]

	str.split(/\s{1}/)  // ["I", "Love", "Javascript."]

	str.split(/\s{2}/)  // ["I Love Javascript."]

链接



ES6

* link(url)（转成链接）

	str.link('z.cn') // '<a href="z.cn">I Love Javascript.</a>'

* anchor(name)（转成页内定位链接，又叫锚链接）

	str.anchor('top')  // '<a name="top">I Love Javascript.</a>'

4.2 修改

切割



* substr(start[,length])（start参数可为负，第二个参数为长度）

	str.substr(2,3)  // 'Lov'（start为负时，IE需要使用polyfill）

* substring(indexStart[,indexEnd])（参数皆不可为负，取值>=0）

	str.substring(2,3)  // 'L'

* slice(beginIndex[,endIndex])（参数皆可为负）

	str.slice(-8,-2)  // 'ascrip'

* trim()（删除文本左右两边空格，文本中的空格不删除）

	str.trim()  // 'I Love Javascript.'

* trimLeft(删除文本左边空格)

* trimRight(删除文本右边空格)

拼接



concat(string2[,string3,....stringN])（字符串拼接，可有多个参数）

	str.concat('Me Too.')  // 'I Love Javascript.Me Too.'

ES6

String.raw()（单行字符串，会转义\n\u000A等转义字符）

	let name = 'Bob';String.raw`Hi\n${name}!`  // 'Hi\nBob!'

	String.raw`Hi\n${2+3}!`;  // 'Hi\n5!'

	String.raw`Hi\u000A!`;  // 'Hi\u000A!'

	String.raw({ raw: 'test' }, 0, 1, 2);  // 't0e1s2t'

4.3 匹配

搜索



* indexOf(searchValue[,fromIndex])（大于length返回-1）

	str.indexOf('a')  // 8

	str.indexOf('a',20)  // -1

* lastIndexOf(searchValue[,fromIndex])

	str.lastIndexOf('a')  // 10 fromIndex小于0时转换为0

	str.lastIndexOf('a',20)  // 10 fromIndex大于length时搜索整个字符串

	str.lastIndexOf('a', 9)  // 8 使用了index，搜索完了右边，还要搜索左边

* charAt(index)

	str.charAt(5)  // e

* charCodeAt(index)

	str.charCodeAt(5)  // 101

* String.fromCharCode(num1[,...[,numN]])

	String.fromCharCode(101)  // e 使用的是Unicode编码

ES6

* CodePointAt(index)

* String.fromCodePoint(num1[,...[,numN]])

* includes(searchString[,position])（判断文本是否存在的搜索，位置参数可选）

	str.includes('Love')  // true（返回值为true/false）

* startWith(searchstring[,position])

	str.endsWith('I')  // true

	str.endsWith('i')  // false

* endsWith(searchstring[,position])

	str.endsWith('Javascript.')  // true

	str.endsWith('Javascript')  // false

正则

replace使用函数作为第二参数请见MDN



* match(regexp)（匹配到返回结果，没有则返回null）

	str.match(/Lo/)   // ["Lo"]

	str.match(/Los/)  // null

* search(regexp)（匹配到返回下标，没有则返回-1）

	str.search(/Lo/)  // 2

	str.match(/Los/)  // -1

* repacle(regexp|substr,newSubstr|function)（得到的是返回的新字符串，原字符串不变）

	str.replace(/Love/,'like')	// 'I like Javascript.'

	str.replace(/Love/,'like');str	// 'I Love Javascript.'

	var newStr = str.replace(/Love/,'like');newStr	// 'I like Javascript.'

精确匹配

	数字 \d 匹配0-9中任意数字，亦可表示成[0-9]

	单词 \w 匹配数字、大小写字母和下划线，亦可表示成[A-Za-Z0-9_]

	字符 \s 匹配空白字符（空格、水平或垂直制表符、换行、换页等），亦可表示成[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]

	取反 \D\W\S 这些表示的是对应小写字母的集合取反，比如\D为[^0-9]，也就是只要不是0-9都可以匹配

	边界 ^x，x$分别匹配字符首和尾。\b，\B分别匹配单词首和尾。

	右值 x(?=y)为当x紧接着的一个字符是y则匹配。x(?!y)表示紧接着的不是y则匹配。

	空白 \t、\v、\f、\r、\n、[\b],分别为水平制表符、垂直制表符、换页、回车、换行和退格。这些都是空白字符。

模糊匹配

	0个或以上  	*

	1个或以上	+

	1个或0个 	?

	这个或那个	x|y

	非换行和回车	.

按组匹配

	最起码一组	{1,}

	一组到三组	{1,3}

	只要一组 	{1}

4.4 文本

状态



* toUpperCase()（转成大写）

	str.toUpperCase()  // I LOVE JAVASCRIPT.

* toLowerCse()（转成小写）

	str.toLowerCase()  // 'i love javascript.'

* toLocalUpperCase()/toLocalLowerCase()（本地化的大写和小写，一般不使用）

ES6语法

repeat(count)（让文本重复多次，参数为重复的次数，范围为>=0。）

	str.repeat(2) // 'I Love Javascript.I Love Javascript.'

修饰



已废弃清单（不推荐使用）（以下皆用来生成HTML标签）

	sup()  // <sup> 上标

	sub()  // <sub> 下标

	bold()  // <b> 粗体

	big()  // <big> 大号字体

	small()  // <small> 小号字体

	strike()  // <strike> 删除线

	italics()  // <i> 斜体

	fixed()  // <tt> 打印机字体

	blink()  // <blink> 闪烁字体

	fintsize(number)  // <font size=""> 参数取值范围为1-7

	fontcolor(color)  // <font color="">

4.5 其他

更多的用法和解释请见MDN。



* valueOf()  // 转换成字符串，默认自动调用，不可直接使用

* toSource()  // 自动调用

* localeCompare()

ES6

* string[Symbol.iterator]

* normalize()

结语

本文部分参考W3School，主要参考MDN。另外，还参考了汤姆大叔、幻天芒、前端网和每天进步一点点！的博客。

汤姆大叔的深入理解JAVASCRIPT系列，貌似不错，留个标记，好好学。

前端网也不错，做个标记，好记得路。

附：ES6规范 | ES3规范 | ES5规范

秒客网

前端总结·基础篇·JS（一）原型、原型链、构造函数和字符串（String）

前端总结系列

目录

一、原型链

1.1 prototype（原型）

1.2 proto（原型链）

1.3 constructor（构造函数）

二、字符串使用

2.1 定义字符串

2.2 使用字符串

三、常用技巧

3.1 字频统计

四、方法列表

4.1 转换

4.2 修改

4.3 匹配

4.4 文本

4.5 其他

结语

相关文章

前端总结·基础篇·JS（一）原型、原型链、构造函数和字符串（String）

前端总结系列

目录

一、原型链

1.1 prototype（原型）

1.2 __proto__（原型链）

1.3 constructor（构造函数）

二、字符串使用

2.1 定义字符串

2.2 使用字符串

三、常用技巧

3.1 字频统计

四、方法列表

4.1 转换

4.2 修改

4.3 匹配

4.4 文本

4.5 其他

结语

相关文章

1.2 proto（原型链）