JS内置对象：String字符
一、String 字符串对象
定义字符串的方法就是直接赋值。
比如：
var mystr = "I love JavaScript!"
定义mystr字符串后，我们就可以访问它的属性和方法。
1/访问字符串对象的属性length:
stringObject.length; //返回该字符串的长度。
【例如】
var mystr="Hello World!";
var myl=mystr.length;
以上代码执行后，myl 的值将是：12
2/访问字符串对象的大小写变化：toUpperCase()与toLowerCase()
【语法】：
stringObject.toUpperCase()
【功能】：把字符串转换为大写。
【语法】：
stringObject.toLowerCase()
【功能】：把字符串转换为小写。
【案例】：使用 String 对象的 toUpperCase() 方法来将字符串小写字母转换为大写：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>string对象 </title>
<script type="text/javascript">
var message="I love JavaScript!";
var mychar= message.toUpperCase();
document.write("字符串为："+mychar+"<br>");
</script>
</head>
<body>
</body>
</html>
【备注】
如果是变小写，则 message.toUpperCase()替换为message.toLowerCase();
二、返回指定位置的字符charAt()
方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。
【语法】:
stringObject.charAt(index)
【参数说明】：
index：必需。表示字符串中某个位置的数字，即字符在字符串中的下标。
【注意】:
1:字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一（string.length-1）。
2:如果参数 index 不在 0 与 string.length-1 之间，该方法将返回一个空字符串。
3:一个空格也算一个字符。
【案例】返回最后一个字符。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>string对象 </title>
<script type="text/javascript">
var mystr="I love JavaScript!"
document.write(mystr.charAt(mystr.length-1));
</script>
</head>
<body>
</body>
</html>
三、返回指定的字符串首次出现的位置indexOf()
indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。
【语法】:
stringObject.indexOf(substring, startpos)
【参数说明】:
substring：必需。规定需检索的字符串值。
startpos：可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是0到stringObjectlength-1.如果省略该参数，则将从字符串的首字符开始检索。
【语法说明】：
1.该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 substring。
2.可选参数，从stringObject的startpos位置开始查找substring，如果没有此参数将从stringObject的开始位置查找。
3.如果找到一个 substring，则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
【注意】：
1:indexOf() 方法区分大小写。
2:如果要检索的字符串值没有出现，则该方法返回 -1。
【案例】使用indexOf()方法，检索第二个字符ｏ出现的位置。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>string对象 </title>
<script type="text/javascript">
var mystr="Hello World!"
document.write(mystr.indexOf('o',mystr.indexOf('o')+1));
</script>
</head>
<body>
</body>
</html>
【结果】为7
四、掌握字符串对象的方法：split()和replace()
- 1/字符串分割split()
split() 方法将字符串分割为字符串数组，并返回此数组。
【语法】：
stringObject.split(separator,limit)
【参数说明】：
separator 必需。从该参数指定的地方分割stringObject。
limit 可选参数，分割的次数，如设置该参数，返回的子串不会多于这个参数指定的数组，如果无此参数为不限制次数。
【注意】
如果把空字符串（""）用作separator，那么stringObject中的每个字符之间都会被分割。
【案例】：
运用split()方法，完成以下任务，并输出:1.以字符"-"分隔字符串对象mystr。2. 将字符串对象mystr每个字符分割。3. 将字符串对象mystr分割成字符，分割3次。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
var mystr="86-010-85468578";
document.write(mystr.split("-")+ "<br />");//1.以字符"-"分隔字符串对象mystr
document.write(mystr.split("")+ "<br />");//2. 将字符串对象mystr每个字符分割。
document.write(mystr.split("-",3));//3. 将字符串对象mystr分割成字符，分割3次。
</script>
</head>
<body>
</body>
</html>
【结果】
【案例】：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>string综合应用</title>
</head>
<body>
<script>
var str="tom/how/are/you/doing/today";
var arr=str.split("/");
console.log(arr);
</script>
</body>
</html>
【结果】：
2/replace替换
【语法】：
stringObject.replace(regexp/substr,replacement)
【功能】：
在字符串中用一些字符替换另一些字符，或替换一个与正则式匹配的子串。
【返回值】：string
【参数】：
regexp:必需。规定子字符串或要替换的模式的RegExp对象。
replacement:必需。一个字符串值。
【案例】：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>string综合应用</title>
</head>
<body>
<script>
//替换
var tel="010-62971268,400-100-9098,010-86789889";
var newTel=tel.replace(","," ");
console.log(newTel);
</script>
</body>
</html>
【结果】：
五、提取字符串：slice()、substring()、substr()
- 1/提取字符串slice()
【语法】：
stringObject.slice(start,end)
【功能】：
截取子字符串。
【参数说明】：
1.start：必需，指定子字符串的开始位置。
2.end：可选，表示子字符串到哪里结束，
若end本身不在截取范围之内（即end-1），省略时截取至字符串的末尾。
3.当为负数时，其值为字符串长度+该负数
【案例】：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var str="hello world";
//截取orl
console.log(str.slice(7,10));
</script>
</body>
</html>
-2/ 提取字符串substring
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
【语法】:
stringObject.substring(startPos,stopPos)
startPos 必需。一个非负的整数，开始位置。
stopPos 可选。一个非负的整数，结束位置，如果省略该参数，那么返回的子串会一直到字符串对象的结尾。
说明：
console.log(str.substring(-7,5));//当第一个为负值时直接等同于0，即(0,5)
console.log(str.substring(2,-5));//当第二个数值比第一个小的时候，直接调整顺序为小到大截取，即（0,2）
【注意】：
1:返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。
2:如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
3:如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
【案例】：
运用substring()方法，完成子字符串Hello World!的提取:1.从字符对象mystr中提取World!子字符串。2. 从字符对象mystr中提取Hello子字符串。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>string对象</title>
<script type="text/javascript">
var mystr="Hello World!"
document.write(mystr.substring(6)+ "<br />");
document.write(mystr.substring(0,5));
</script>
</head>
<body>
</body>
</html>
【结果】
★【辨析】substring()与slice()
它俩语法及功能完全一样。
区别在于：
1.当substring()参数为负数时，自动将参数转换为0.
2.substring()会将较小的数作为开始位置，将较大的数作为结束位置。
- 3/提取指定数目的字符substr()
substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。
【语法】:
stringObject.substr(startPos,length)
【参数说明】
startPos 必需。要提取的子串的起始位置。必须是数值。
length 可选。提取字符串的长度。如果省略，返回从stringObject的开始位置startPos到stringObject的结尾的字符。
【注意】
如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
如果startPos为负数且绝对值大于字符串长度，startPos为0。
【案例】
运用substr()方法，完成以下任务:1.提取字符world!。2.提取字符Hello。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>substr()</title>
<script type="text/javascript">
var mystr="Hello World!";
document.write( mystr.substr(6)+ "<br />");
document.write(mystr.substr(0,5));
</script>
</head>
<body>
</body>
</html>
★综合应用1
掌握字符串方法的综合应用：
编写js函数，用于获得输入参数的后缀名，如输入abc.txt，返回.txt
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>string综合应用</title>
</head>
<body>
<script>
//获取扩展名
var url="http://baidu.com/index.txt";
function getFileFormat(url){
//获取.在url中出现的位置
var pos=url.lastIndexOf(".");
return url.substr(pos);
}
var formatName=getFileFormat(url);
var picForamt=getFileFormat("1231434.jpg");
console.log(formatName);
console.log(picForamt);
</script>
</body>
</html>
【结果】：
★综合应用2
将border-left-color 转化为borderLeftColor驼峰形式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border-left-color转化为borderLeftColor</title>
</head>
<body>
<script>
//border-left-color borderLeftColor//驼峰形式
function camelback(str){
//通过-这个分隔符将str拆分成数组
var arr=str.split("-"),newStr=arr[0];
//console.log(arr);//["border","left","color"]
//newStr="border";
for(var i=1,len=arr.length;i<len;i++){
var word=arr[i];
//console.log(world);
//将每一个单词的首字母转换为大写,连接剩余字符
newStr+=word.charAt(0).toUpperCase()+word.substr(1);
//console.log(newStr);
//newStr=borderLeftColor
}
return newStr;
}
var camelFormat=camelback("border-left-color");
console.log(camelFormat);
</script>
</body>
</html>
end.
本笔记整理自慕课网
