HTML 学习笔记 JavaScript (String)
String对象用于存储字符串的数据。这里我们做了JavaScript的String字符串对象常用操作总结。
创建String对象的方式
声明:String 对象的方法也可以在所有基本字符串值中访问到
调用构造函数String():
var str = new String();
str = "heihei";
var str1 = new String("haha");
alert(str +str1);
String访问及查找的方式
1.访问(通过索引)
1>charAt()或[]
1个参数,参数为字符位置,返回字符
var newStr = "houhouhahei";
console.log(newStr[0]);//h
console.log(newStr.charAt(2));//u
2>charCodeAt()
1个参数,参数为字符串位置,返回字符编码
var newStr = "houhouhahei";
alert(newStr.charCodeAt(0));//104
2.查找位置
1>indexOf()
第一个参数为检索的字符,第二个参数为开始检索的位置 ,返回索引字符的索引值,如果没有找到则返回-1
如果第二个参数省略,则返回检索字符在字符串中第一次出现的索引。
var indexStr = "hello world";
alert(indexStr.indexOf("l"));//2
alert(indexStr.indexOf("l",6));// 9从第六个字符开始检索l 返回第一个l的索引值
alert(indexStr.indexOf("h",6));//-1 从第六个开始检索h 找不到返回-1
2>lastIndexOf()
与indexOf()的区别在于,lastIndexOf()是从字符串的末尾向前搜索子字符串。
字符方法
1.扩展字符串
1> concat()
接受任意数量参数,用于将一个或者多个字符串拼接起来 返回拼接得到的新的字符串副本。
var str = new String("Hello");
var result = str.concat("World");
console.log(result);//HelloWorld
var str1 = "tian ";
var str2 = "lian ";
var str3 = "feng";
var result1 = str1.concat(str2,str3);
alert(result1);//tian lian feng
2> 使用"+"号拼接字符串
var str1 = "tian ";
var str2 = "lian ";
var str3 = "feng";
var result1 = str1 + str2 + str3;
alert(result1);//tian lian feng
相比较这两个方法 推荐使用第二种 方便快捷效率高。
2.获取子字符串
slice(),subStr(),substring(),这三个方法都会返回被操作字符串的子字符串副本 而且也都接受1或者2个参数,前闭后开
1>slice() 提取字符串的某个部分,并返回被提取的新的字符串
语法 stringObject.slice(start,end) 如果参数是负数 则字符串的最后一个字符的index为-1 从后面找起。
var nameStr = "tianxiaopang";
var subName = nameStr.slice(3);
var subname1 = nameStr.slice(4,9);
console.log(subName);//nxiaopang
console.log(subname1);//xiaop //可以看出来是前闭后开区间 var str = 'hello';
str.slice(0,2);//"he",第一个参数指定字符串开始的位置,第二个参数表示字符串到哪里结束
str.slice(-3);//"llo",o代表-1,依次倒数,-3代表倒数第三个的l
str.slice(-2,-1);//"l",同理,-2代表倒数第二个l,-1代表倒数第一的o
2> substring() 不推荐使用 建议使用slice()代替
var demoStr = "Hello";
console.log(demoStr.substring(0,2));//"he"
console.log(demoStr.substring(-3));//"Hello" substring()会把所有的负值参数转换为0
console.log(demoStr.substring(-3,-1));//"" 同上
3>substr() 不推荐使用 建议使用slice()代替
var demoStr = "Hello";
console.log(demoStr.substr(0,2));//he
console.log(demoStr.substr(-3));//llo 同slice()方法
console.log(demoStr.substr(-3,-1));//"" substr()会将负的第二个参数变为0
3 将字符串转换为数组
split()
基于指定的分隔符(可以是字符串,也可以是RegExp对象)将字符串分割成多个子字符串,并将结果放在一个数组中,可接受可选的第二个参数,用于指定数组的大小,返回数组。
var color = "blue,red,orange";
color.split();//["blue,red,orange"],长度为1
color.split(",");//["blur","red","orange"];长度为3
var color1 = 'blue-red-orange';
color1.split('-');//["blue", "red", "orange"],长度为3
console.log(color1.split('-',2) + " 长度:" + color1.split(",",2).length);//["blue", "red"],不知道为什么提示长度为1
4.字符串大小写转换
var str = 'hello';
str.toUpperCase();//"HELLO"
str.toLowerCase();//"hello"
5.删除字符串空格的方法
trim()
删除字符串中前置以及后置的所有空格 然后返回结果副本
function trimStr() {
var str = " 我是一个字符串 ";
var newStr = str.trim();
alert(newStr);//"我是一个字符串"
}
6.字符串的模式匹配方法
1> match()
参数 只接受一个参数,要么是一个正则表达式,要么是一个RegExp()对象
返回:数组 数组中的第一项是与整个模式匹配的字符串 ,之后的每一项(如果有)保存着正则表达式捕获匹配的字符串。
var text = 'cat, bat, sat, fat';
var pattern = /.at/; var matches = text.match(pattern);
matches // ["cat"]
matches.input // "cat, bat, sat, fat"
matches.index // 0
2> search()
参数:与match()方法相同。
返回:字符串中第一个匹配项的索引,如果没有匹配项,则返回-1。
search()方法始终从前向后找
var text = 'cat, bat, sat, fat';
var pattern = /at/; text.search(pattern) // 1
3> replace()
参数:接收两个参数,第一个参数可以是一个RegExp对象或者一个字符串(这个字符串不会转换成正则表达式),第二个参数可以是一个字符串或者一个函数。
如果 第一个参数是字符串,那么只会替换第一个子字符串。要想替换所有子字符串,唯一的办法就是提供一个正则表达式,而且要指定全局标志(g)标志。
如果 第二个参数是字符串,那么还可以使用一些特殊的字符序列,将正则表达式操作得到的值插入到结果字符串中。
也可以是函数,传递给函数的参数依次是模式的匹配项,模式的匹配项在字符串中的位置,和原始字符串。在正则表达式定义了多个捕获组的情况下,传递给函数的参数依次是模式的匹配项,第一个捕获组的匹配项,以此类推,但最后两个参数分别是模式的匹配项在字符串中的位置和原始字符串。

var text = 'xxx-love-xxx';
var pattern = /xxx/g; var result = text.replace(pattern,'2')
result// "2-love-2" text.replace(/(xxx)-\w{4}-(xxx)/g,'I love YOU');//"I love YOU"
var text = 'xxx-love-xxx';
var pattern1 = /xxx/g; var result = text.replace(pattern1,'$$')
result// "$-love-$" var result = text.replace(pattern1,'$&2')
result//"xxx2-love-xxx2" var result = text.replace(pattern1,'$\'')
result//"-love-xxx-love-"
http://www.jb51.net/article/85161.htm
http://www.cnblogs.com/huangjianhuakarl/archive/2013/05/29/3105573.html
http://www.jb51.net/article/62176.htm
HTML 学习笔记 JavaScript (String)的更多相关文章
- 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
学习笔记---Javascript事件Event.IE浏览器下的拖拽效果 1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...
- HTML 学习笔记 JavaScript(面向对象)
现在让我们继续跟着大神的脚步前进 学习一下JavaScript中的面向对象的思想,其实作为一个iOS开发者,对面向对象还是比较熟悉的,但是昨晚看了一下Js中的面向对象,妈蛋 一脸萌比啊.还好有大神.让 ...
- [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡
当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...
- JavaScript学习笔记之string
字符串定义: 1,var myString=“内容”:or var myString=‘内容’ 2,var myString= new String(“内容”) ---〉创建对象, ...
- HTML 学习笔记 JavaScript (prototype)
原博地址:http://www.cnblogs.com/dolphinX/p/3286177.html 原博客的作者是一个非常牛逼的前端大神,我作为一个初学者,在此借助大神的博客进行自己的学习.在这里 ...
- HTML 学习笔记 JavaScript(数组)
1.数组的创建 var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是 ...
- HTML 学习笔记 JavaScript(创建对象)
原博地址:http://www.cnblogs.com/dolphinX/p/3288118.html JavaScript 有Date Array String等这样的内置对象,功能强大实用简单,但 ...
- HTML 学习笔记 JavaScript(数据类型)
字符串 数字 布尔 数组 对象 Null Undefined JavaScript 拥有动态类型 JavaScript拥有动态类型 这意味着相同的变量可用作不同的类型: 实例: var x // x ...
- j2ee学习笔记 javascript 学习
JavaScript 组成: ECMAScript + BOM + DOM Window对象是JS中的顶层对象 ECMAScript: 规定了一些语法,变量,for循环等等结构 BOM: Browse ...
随机推荐
- Spring学习系列(二) 自动化装配Bean
一.Spring装配-自动化装配 @Component和@ComponentScan 通过spring注解(@Component)来表明该类会作为组件类,并告知Spring要为这类创建bean,不过组 ...
- GJM : C#语言学习笔记
--------------------------------------C#--------------------------------------if (tom == null) tom = ...
- JavaWeb之CSS详解
CSS的简介 1.CSS概述及作用 CSS:Cascading Style Sheets)是层叠样式表用来定义网页的显示效果.可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强 ...
- json和jsonp的区别,ajax和jsonp的区别
json和jsonp虽然只有一个字母的区别,但是它们之间扯不上关系. json是一种轻量级的数据交换格式. jsonp是一种跨域数据交互协议. json的优点:(1)基于纯文本传递极其简单,(2)轻量 ...
- javascript的函数(二)
1. 函数的作用域 作用域是指变量的存在的范围.javascript中有两种作用域,一种是全局作用域,变量在整个程序中一直存在,另一种是函数作用域,变量只存在于函数体内部.在函数体外部声明的变量就是全 ...
- 【代码笔记】iOS-可以向左(右)滑动
一,效果图. 二,代码. RootViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional se ...
- HTML5-03 页面布局
概述 HTML 文档中的元素是一个接着一个排列的,只是简单地在在块级元素的前后加上拆行,是一种流水布局.但是,我们所见到的 Web 页面按照一定的规则布局排版的(通常是多列的),所以就要借助一定的方法 ...
- React Native 红屏之Could not connect to development server.
React Native 是目前最火的开发框架,其他不说了,上Bug. 按照 React Native iOS环境搭建 高级版 在mac上 搭建 React Native 环境,运行 项目 若出 ...
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
- Erlang 虚拟机内的内存管理(Lukas Larsson演讲听写稿)
Erlang核心开发者Lukas Larsson在2014年3月份Erlang Factory上的一个演讲详细介绍了Erlang内存体系的原理以及调优案例: http://www.erlang-fac ...