JavaScript基础学习-字符串方法

String作为一个类,继承了Object中的valueOf()、toLocaleString()和toString()方法,都返回对象所表示的基本字符串值。

String类型的每一个实例都有一个length属性,表示字符串中包含多少个字符。

注意:字符串属性不可编辑,任何试图改变它属性的行为都会报错。

创建方法

字面量创建方式(最常用)

    var str = 'hello world';

实例创建方式

     var str = new String('hello world')

字符串中方法

构造器方法

fromCharCode

返回使用指定的Unicode序列创建的字符串,也就是说传入Unicode序列,返回基于此创建的字符串

语法:fromCharCode(num1, num2,…),传入的参数均为数字。

  String.fromCharCode(65, 66, 67); // "ABC"

只能处理字符都是2个字节的,不能处理4字节字符

fromCodePoint(ES6)

同fromCharCode,扩展了对4字节字符的支持。

String.raw(ES6)

用来充当模板字符串的处理函数,返回一个斜杠都被转义的字符串,对应于替换变量后的模板字符串

字符串的属性

  • String.prototype.constructor 指向构造器(String())
  • String.prototype.length 表示字符串长度

1.字符方法

两个用于访问字符串中特点字符的方法是:charAt()和charCodeAt()。都接受一个参数,一个数字。即基于0的字符位置。

  • chartAt()方法以单字符字符串的形式返回给定位置的那个字符
     var str = 'hello world';
     console.log(str.chartAt(0));//'h'
  • chartCodeAt()方法返回的是给定位置的那个字符的字符编码(ASCII)
     var str = 'hello world';
     console.log(str.chartCodeAt(1));//'101'
  • 还可以利用方括号加数字索引来访问字符串中的特定字符
var str = 'hello world';
     console.log(str[0]);//'h'

2.字符串操作方法

  • 1.concat()字符串拼接,参数可以为多个,按照参数顺序进行排序。不改变原字符串。
    var str = 'hello';
     var res = str.concat(' world','hello');
    console.log(res);//hello worldhello

该方法一般情况下不使用,大部分我们都是使用+号来进行字符串拼接的。

  • 2.slice()和substring()是用来截取字符串的。参数可以是1个或者2个。
    slice(n,m)/substring(n,m);//表示从索引n截取到m,但不包含m。原字符串不变,返回一个新的字符串

他俩的区别就是当传入的参数为负值时,会不一样。slice()会将传入的负值与字符串的长度相加。而substring()方法会把所有的负值参数都转换为0

  • 3.substr()也是用来截取字符串的。但参数和上面不同,两个参数。第一个是索引开始的位置,第二个是要截取字符的个数。当参数为负数的情况,会将负的第一个参数加上字符串的长度,而将负的第二个参数转换为0。

3.字符串位置方法

indexOf()和lastIndexOf()。这两个方法都是从一个字符串中搜索给定的子字符串,然后返回子字符串的位置(如果没有找到该子字符串,则返回-1)。可以接受第二个参数,表示从字符串中的哪个位置开始搜索。

区别是:indexOf()方法从字符串的开头向后搜索子字符串,而lastIndexOf()方法是从字符串的末尾向前搜索。

4.trim()方法

该方法返回一个去除首尾空格的新字符串。不兼容

5.字符串大小写转换方法

toLowerCase()、toLocaleLowerCase、toUpperCase()和toLocaleUpperCase()。区别就是带locale的是针对特点地区的实现。使用带locale的会更稳妥一些。

6.字符串的模式匹配方法

  • match();
  • 用于测试字符串是否支持指定正则表达式的规则,即使传入的是非正则表达式对象,他也会隐式调用new RegExp(obj)将其转换为正则表达式
    • 参数:1个 要么是一个正则表达式,要么是一个正则对象。
    • 作用:将所有符合条件的捕获到,返回一个数组
    • 返回值:返回一个符合条件的数组
     var str = 'hello world';
var res = str.match(/he/);
console.log(res);//[ 'he', index: 0, input: 'hello world' ]

//捕获小分组的内容 在非全局的情况下
  var str = 'hello world';
var res = str.match(/(o)/);
console.log(res);//[ 'o', 'o', index: 4, input: 'hello world' ]
//在全局情况下
  var str = 'hello world';
var res = str.match(/(o)/g);
console.log(res);//[ 'o', 'o' ]

该数组的第一项是符合条件的字符串,第二项是出现在字符串中的位置,最后一项是原始字符串。当在非全局的情况下,可以捕获到小分组中的内容,从第一项往后就是小分组捕获的内容。后两项依然是位置和原始字符串。

在正则是在全局捕获的情况下,match方法的返回值会发生改变,会返回一个符合条件的所有字符串的数组。但无法捕获小分组的内容了就。

  • search();

  • 不支持全局匹配

    • 作用:查找的作用,返回字符串中第一个匹配项的索引。没有的话返回-1。
    • 参数:唯一的参数,要么是一个正则表达式,要么是一个正则对象。
    • 返回值:找到就返回字符串中第一个匹配项的索引,找不到返回-1。
  • replace();

    • 作用:替换子字符串。把符合匹配的内容换成替换的字符串。
    • 参数:两个。第一个参数可以是一个正则或者是一个字符串(不会被转换成正则表达式)。第二个参数可以是一个字符串或者一个函数。
    • 返回值:返回一个替换好的字符串。

如果第一个参数是字符串,那么只会替换到第一个符合的子字符串。

//当第一个参数为字符串的时候。第二个参数是字符串
var str = 'hello world hello world';
var res = str.replace('hello','HELLO');
console.log(res);

//当第一个参数为字符串的时候,第二个参数是函数。结果也是只能替换第一个符合的
var str = 'hello world hello world';
var res = str.replace('hello',function () {
    console.log(arguments);//{ '0': 'hello', '1': 0, '2': 'hello world hello world' }
    return 'HELLO';

});
console.log(res);//HELLO world hello world

如果第一个参数是正则,在非全局情况下也是只替换第一个符合的。在全局情况下会替换掉所有符合条件的字符。

//在非全局的情况下。
  var str = 'hello world hello world';
var res = str.replace(/hello/,function () {
    console.log(arguments);//{ '0': 'hello', '1': 0, '2': 'hello world hello world' }
    return 'HELLO';

});
console.log(res);  //HELLO world hello world
//在全局情况下
var str = 'hello world hello world';
var res = str.replace(/hello/g,function () {
    console.log(arguments);//{ '0': 'hello', '1': 0, '2': 'hello world hello world' }   { '0': 'hello', '1': 12, '2': 'hello world hello world' }
    return 'HELLO';

});
console.log(res);//HELLO world HELLO world
  • 在全局模式下。回掉函数的执行次数,取决与原始字符串中有多少符合捕获正则的内容。arguments拿到的是一个数组。在没有小分组捕获的时候,为三项:1.符合大正则的内容,2.找到对应内容的索引,第三.原始子字符串。在有小分组的时候。小分组的内容从第二项开始。
  • return:相当于当前这一次大正则捕获的内容替换成返回的内容。

  • split();

    • 作用:将字符串根据传进来的分隔符,转换成数组
    • 参数:可以是字符串也可以是正则。可以传递第二个参数,是一个数字,表示数组的长度。
    • 返回值:一个基于分隔符的字符串的数组。
  var str = 'hello world hello world hello world';
var res = str.split(' ');
console.log(res);//[ 'hello', 'world', 'hello', 'world', 'hello', 'world' ]
//如果原始字符串中没有传进去的分隔符,则将整个字符串放到一个数组中。
var str = 'hello world hello world hello world';
var res = str.split('f');
console.log(res);   //[ 'hello world hello world hello world' ]

7.localeCompare()

  • 作用:用于比较两个字符串,
  • 参数:str.localeCompare(str1);
  • 返回值:
    • 如果字符串在字母表中应该排在字符串参数之前,则返回一个负数(-1)
    • 如果字符串等于字符串参数,则返回0;
    • 如果字符串在字母表中应该排的字符串参数之后,则返回一个正数

8.fromCharCode()方法

是String构造函数上的一个静态方法。作用是接受一或多个字符编码,然后将它们转换成一个字符串。这个方法与charCodeAt()执行的是相反的操作。

转换字符的大小写

  • toLocaleLowerCase 转换成小写
  • toLocaleUpperCase 转换成大写
  • toLowerCase 转换成小写
  • toUpperCase 转换成大写

trim()

清除字符串首尾的空白并返回

codePointAt(ES6)

返回使用UTF-16编码的给定位置的值得非负整数

includes(ES6)

用来判断一个字符串是否属于另一个字符串,如果是返回true ,反之返回false

语法:str.includes(subString [, position])

subString 表示要搜索的字符串,position 表示从当前字符串的哪个位置开始搜索字符串,默认值为0。

endsWith

它基本与 contains() 功能相同,不同的是,它用来判断一个字符串是否是原字符串的结尾。若是则返回true,否则返回false。

normalize(ES6)

它会按照指定的 Unicode 正规形式将原字符串正规化。

repeat(ES6)

返回重复原字符多次的新字符串

startsWith(ES6)

类似于endsWith。当前字符串是否是以给定字符串开始的

与html相关的方法

anchor

创建一个锚标签

语法:str.anchor(name)

name 指定被创建的a标签的name属性,使用该方法创建的锚点,将会成为 document.anchors 数组的元素。

var str = "this is a anchor tag";
document.body.innerHTML = document.body.innerHTML + str.anchor("anchor1"); // body末尾将会追加这些内容 <a name="anchor1">this is a anchor tag</a>

link

创建一个a标签

语法:str.link(url)

url 指定被创建的a标签的href属性,如果url中包含特殊字符,将自动进行编码。例如 " 会被转义为 &\quot。 使用该方法创建的a标签,将会成为 document.links 数组中的元素。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容