前端总结·基础篇·JS(一)五大数据类型之字符串(String)

前端总结系列

目录

这是《前端总结·基础篇·JS》系列的第一篇,主要总结一下JS的五大基本数据类型中的字符串。


一、属性(Attribute)
二、方法(Method)
    2.1 转换
    2.2 修改
    2.3 匹配
    2.4 文本
    2.5 其他

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

  1. 参数中的[]代表可选参数。如substr(start[,length])中,length为可选参数。
  2. 本文对常用API做了精准分类,更加便于阅读。
  3. 需要让某些浏览器支持某些新功能,,可以使用腻子脚本(Polyfill),详见MDN

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


var str = 'I Love Javascript.'

一、属性(Attribute)


* length
    str.length  // 18

* prototype(原型)
    String.prototype.bibi = 'die';str.bibi // 'die' 原型,可对数据类型添加属性或方法。在特殊情况下用,不推荐直接修改。

* __proto__(原型链)
    str.__proto__  // '{length: 0, [[PrimitiveValue]]: ""}' 原型链,点击可展开字符串所有方法

* constructor(构造函数)
    str.__proto__.constructor // function String() { [native code] } 构造函数
    str.__proto__.__proto__.constructor

二、方法(Method)

2.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>'

2.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()(单行字符串,会转义nu000A等转义字符)
    let name = 'Bob';String.raw`Hin${name}!`  // 'HinBob!'
    String.raw`Hin${2+3}!`;  // 'Hin5!'
    String.raw`Hiu000A!`;  // 'Hiu000A!'
    String.raw({ raw: 'test' }, 0, 1, 2);  // 't0e1s2t'

2.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 匹配空白字符(空格、水平或垂直制表符、换行、换页等),亦可表示成[ fnrtvu00a0u1680u180eu2000-u200au2028u2029u202fu205fu3000ufeff]
    取反 DWS 这些表示的是对应小写字母的集合取反,比如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}

2.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="">

2.5 其他

更多的用法和解释请见MDN


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

ES6

* string[Symbol.iterator]
* normalize()

结语

本文的分类是在W3School整理知识的时候写出来的,更详尽的用法说明和ES6语法补充是根据MDN添加进去的。所有的测试代码都在console中过了一遍,如有什么问题,欢迎留言提问。

附:ES6规范 | ES3规范 | ES5规范

IT文库 » 前端总结·基础篇·JS(一)五大数据类型之字符串(String)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址