###1、字符方法
charAt()和charCodeAt(),这两个方法都接收一个参数,及基于0的字符位置,charAt()返回的是给定位置的字符,charCodeAt()返回的是给定位置字符的字符编码。与charCodeAt()对应的一个方法是formCharCode()将字符编码转为字符串。
如:
~~~
<script>
var code = "future";
console.log(code.charAt(2)); //t
console.log(code.charCodeAt(2)) //116
</script>
~~~
除了以上方法外,还可以通过方括号去访问特定位置的字符,如:
~~~
<script>
var code = "future";
console.log(code[2]); //t
</script>
~~~
使用方括号的方法在IE8,Firefox,Safari,Chrome和Opera中都可以支持,但是在IE7及更早版本中不支持,返回的值为undefined.
### 2、字符串操作方法
1、字符串拼接:concact()方法。
~~~
var a = "my ";
console.log(a.concat("future"));//my future
console.log(a.concat("future ", "will"));//my future will
~~~
2、基于子字符串创建新字符串:slice()、substr()和substring().这三个方法都返回操纵字符串的一个子字符串,而且都接收一到两个参数。
第一个参数指定字符串的开始位置,第二个参数(可省略)表示子字符串到哪里结束。slice()和substring()的第二个参数指定的是子字符串最后一个字符后面的位置,而substr()的第二个参数指定的是返回的字符个数。如果省略第二个参数,则截取到字符串最后一个位置。
~~~
var str = "We are family";
console.log(str.slice(2,5)); // ar(从第2个位置开始,不包含第5个位置)
console.log(str.slice(1)); //e are family(从第1个位置开始,一直到最后)
console.log(str.substring(3)); //are family(从第3个位置开始,一直到最后)
console.log(str.substring(3,5));//ar(从第3个位置开始,不包含第5个位置)
console.log(str.substr(2)); // are family(从第2个位置开始,一直到最后)
console.log(str.substr(2,6)); // are f(从第2个位置开始,截取6个字符)
~~~
slice()和substring()方法在正值情况下,实现的功能一致,但是在传递的值为负值时,行为就不相同了。
slice()方法会将传入的负值与字符串的长度相加(因此,如果两个参数都会负值,第二个参数必须要大于第一个参数,否则返回的是空字符串)
substr()方法会将负的第一个参数加上字符串的长度,将将第二个参数转换为0。(如果第二个参数为负值,返回空的字符串)
substring()方法将所有的负值参数都转换为0,substring始终会将较小的参数作为开始位置。
~~~
var str = "Wearefamily"; //length为11
console.log(str.slice(-3,-8));//相当于str.slice(8,3)//返回空字符串
console.log(str.slice(-5,-1));//相当于str.slice(6,10)//返回ami
console.log(str.substring(3,-4));//相当于str.substring(3,0)//返回Wea
console.log(str.substring(-3,-5));//相当于str.substring(0,0)//返回空字符串
console.log(str.substr(-4,3));//相当于substr(7,3)//返回mil
console.log(str.substr(-4,-3));//相当于substr(7,0)//返回空字符串
~~~
### 3、字符串的位置方法
字符串的位置方法:indexOf()和lastIndexOf()。这两个方法都是从一个字符串中搜索给定的子字符串,然后返回子字符串的位置,没有找到,返回-1.indexOf()从字符串的开头向后搜索子字符串,而lastIndexOf()从字符串的末尾向前搜索子字符串。
![](https://box.kancloud.cn/2016-04-07_570603f97a0a6.jpg)
~~~
var str = "WEAREFAMILY";
console.log(str.indexOf("A"));//2
console.log(str.lastIndexOf("A"));//6
~~~
### 4.trim()方法
trim()用于去掉字符串收尾的空格
### 5、字符串大小写转换方法
转换为大写:toUpperCase()和toLocalUpperCase()
转换为小写:toLowerCase()和toLocalLowerCase()
### 6、字符串的模式匹配
match(),replace(),search(),replace()以及split()方法是String类型定义的集中用于在字符串中匹配模式的几种方法。
match方法只接收一个参数,要么是一个正则表达式,要么是一个RegExp对象。在字符串上调用match()方法,本质上和调用RegExp的exec()方法相同,返回的是一个数组
~~~
var str = "we are weamy";
var pattern = /we/;
var matches = str.match(pattern);
console.log(matches);//["we", index: 0, input: "we are weamy"]
console.log(pattern.exec(str));//["we", index: 0, input: "we are weamy"]
console.log(matches.index);//0
console.log(matches[0]);//we
~~~
search()的参数与match()相同,不同在于search()返回的是字符串中第一个匹配项的索引;如果没有找到匹配项,返回-1.
replace()方法,接收2个参数,第一个参数可以是一个RegExp对象或者是一个字符串,第二个参数是一个字符串或者是一个函数,如果第一个参数是字符串,那么只会替换第一个字符串,如果想要替换所有的字符串,那么必须使用正则表达式,并指定全局标志(g)
~~~
var str = "cat, fat, sat, bat";
console.log(str.replace("at","ooo"));//cooo, fat, sat, bat
console.log(str.replace(/at/g,"ooo"));//cooo, fooo, sooo, booo
~~~
如果replace()的第二个参数是字符串,还可以使用一些特殊的字符序列,将正则表达式操作得到的值插入到结果字符中。
$$ $
S& 匹配整个模式的子字符串
Sn 匹配第n个捕获组的子字符串
~~~
var str = "cat, fat, sat, bat";
console.log(str.replace("at","ooo"));//cooo, fat, sat, bat
console.log(str.replace(/(.at)/g,"ooo ($1)"));//ooo (cat), ooo (fat), ooo (sat), ooo (bat)
console.log(str.replace(/(.at)/g,"ooo ($&)"));//ooo (cat), ooo (fat), ooo (sat), ooo (bat)
~~~
split()方法接收一个参数作为分隔符,将字符串转变为数组。
与之相对应的方法是join(),用作将数组转变为字符串。
### 7、LocalCompare()方法
这个方法用于字符串的比较。
如果字符串在字母表中应该拍照字符串参数之前,则返回一个负数。(大多数情况下是-1,具体的值要视实现而定)
如果字符串等于字符串参数,则返回0.
如果字符串在字母表中的顺序排在字符串参数之后,则返回一个正数。(大多数情况下是1,具体的值要视实现而定)
~~~
var str = "break";
console.log(str.localeCompare("future")); //-1
console.log(str.localeCompare("above")); //1
console.log(str.localeCompare("break")); //0
~~~
- 前言
- jQuery轮播图插件
- JS模拟事件操作
- JS闭包与变量
- JS绑定事件
- HTML5之file控件
- JavaScript的this词法
- JavaScript的this词法(二)
- JS this词法(三)
- JS检测浏览器插件
- JS拖拽组件开发
- number输入框
- Modernizr.js和yepnode.js
- DOM变化后事件绑定失效
- div和img之间的缝隙问题
- 详解JavaScript作用域
- bootstrap入门
- 表单验证(登录/注册)
- Bootstrap网格系统
- Bootstrap排版
- Bootstrap创建表单(一)
- Bootstrap表单(二)
- Bootstrap按钮
- Bootstrap图片
- Bootstrap字体图标(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜单
- Bootstrap按钮组
- Bootstrap按钮菜单
- Bootstrap输入框组
- Bootstrap导航元素
- Bootstrap导航栏
- sublimeText频频崩溃
- JQuery不同版本的差异(checkbox)
- Bootstrap面包屑导航、分页、标签、徽章
- Bootstrap警告
- Bootstrap进度条
- 前端的上传下载
- JS字符串的相关方法
- CSS3选择器(全)
- CSS3新增文本属性详述
- 利用CSS3实现图片切换特效
- CSS3新增颜色属性
- CSS3的border-radius属性详解
- JS创建对象几种不同方法详解
- JS实现继承的几种方式详述(推荐)
- CSS3响应式布局
- JS模块化开发(requireJS)
- 利用@font-face实现个性化字体
- 前端在html页面之间传递参数的方法
- CSS自动换行、强制不换行、强制断行、超出显示省略号
- 如何在Html中引入外部页面
- reactJS入门
- React组件生命周期
- 使用React实现类似快递单号查询效果
- ReactJS组件生命周期详述
- React 属性和状态详解