前端总结系列

目录

这是《前端总结·基础篇·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)

四、方法列表

为方便阅读,有如下准则:

  1. 参数中的[]代表可选参数。如substr(start[,length])中,length为可选参数。
  2. 本文对常用API做了精准分类,更加便于阅读。
  3. 需要让某些浏览器支持某些新功能,,可以使用腻子脚本(Polyfill),详见[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/
  4. 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. 前端总结·基础篇·JS(二)数组深拷贝、去重以及字符串反序和数组(Array)

    目录 这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测 二.常用技巧 2.1 ...

  2. 前端总结·基础篇·JS(三)arguments、callee、call、apply、bind及函数封装和构造函数

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  3. 前端总结·基础篇·JS(四)异步请求及跨域方案

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  4. 前端总结·基础篇·JS(一)原型、原型链、构造函数和字符串(String)

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  5. 前端总结·基础篇·CSS(一)布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  6. 前端总结·基础篇·CSS(二)视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  7. 前端总结·基础篇·CSS(三)补充

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...

  8. 前端总结·基础篇·CSS

    前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;}  /* IE8+ */body {margin:0;}  ...

  9. JS json对象(Object)和字符串(String)互转方法

    [JS json对象(Object)和字符串(String)互转方法] 参考:https://blog.csdn.net/wenqianla2550/article/details/78232706 ...

随机推荐

  1. shell 远程备份日志

    #!/bin/bash #Function:自动备份给定列表中的目录或文件,并且可以保留N天备份的档案. #可备份至远程主机指定的目录下,但需本机能免密码登录到远程主机,用到ssh-keygen #该 ...

  2. Grunt插件之LiveReload 实现页面自动刷新,所见即所得编辑

    苦B的前端每次在制作和修改页面时,都有一个特定的三部曲:coding-save-F5.很多时候都希望自己一改东西,页面就能立刻显示,而现在LiveReload就能做到这点. LiveReload会监控 ...

  3. 笔记整理——linux程序设计

    数据库 (2013/2/27 16:07:11) 线程 (2013/2/27 15:47:51)   信号 (2013/2/27 15:31:28)         消息队列.共享内存 (2013/2 ...

  4. NGINX location 配置

    location表达式类型 ~ 表示执行一个正则匹配,区分大小写 ~* 表示执行一个正则匹配,不区分大小写 ^~ 表示普通字符匹配.使用前缀匹配.如果匹配成功,则不再匹配其他location. = 进 ...

  5. Hibernate常见异常

    1.数据库编码问题 主要错误信息 WARN: SQL Error: 1366, SQLState: 22001 ... ERROR: Data truncation: Incorrect string ...

  6. %c输入应注意的问题

    for(i=0;i<n;i++) { getchar(); scanf("%c",&str[i]); } 这样输入是错的 的这样输入 for(i=0;i<n;i ...

  7. js原生继承之——构造函数式继承实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  8. 关于Cookie中不过滤“=”号的方法

    近来做关于Cookie的加解密工作时遇到一个问题:当用cookie.getValue()方法获取Cookie的值时,结果遇到"="号时就会自动截断,后面的值就取不到了.这是因为Ja ...

  9. 使用AIR进行移动APP开发常见功能和问题(下)

    1.  Air如何判断android.ios 平台网络连接状态? Android,使用as3原生api: if(NetworkInfo.isSupported)//只有android支持 Networ ...

  10. node源码详解(四) —— js代码如何调用C++的函数

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource4 本博客同步在https://cnodejs.o ...