前端基本功：JS必记知识点+案例（七）字符
根据字符返回位置
跟 charAt() 相反的 根据 字符 返回的是 位置
1 /返回前面起第一个字符的位置
indexOf(“字符”);
它是从 前面开始数（从左边开始数）， 而且只找第一个， 然后返回改字符的位置， 索引号都是从0开始的。 返回的是个数值。
var txt = “abcdef”;
alert(txt.indexOf(“d”)) 结果就是 3
如果找不到该字符 返回 -1
2/返回后面起第一个字符的位置
lastIndexOf(参数：索引字符串)
从后面开始数 同上
var txt = “abcdef” ;
txt.lastIndexOf(“d”); 3
返回的值，还是从 左边开始 数的 索引号 。
还是从左边数
还是从左边数
上图的完整源码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
字符串:<input type="text" id="txt"/> 索引的字符串: <input type="text" id="index"/>
<button id="btn1">从前面开始索引</button>
<button id="btn2">从后面开始索引</button>
</body>
</html>
<script>
function $(id) {return document.getElementById(id);}
$("btn1").onclick = function() {
alert($("txt").value.indexOf($("index").value));
// asdf.indexOf("d") 根据字符 返回位置 返回d 在 asdf 中的位置
}
$("btn2").onclick = function(){
alert($("txt").value.lastIndexOf($("index").value));
// asdfd.lastIndexOf("d") 返回d 再asdf 位置 从后面开始数
}
</script>
网址编码
我们知道一个网址 自己的网址， 不同页面也有自己id网址， 我们经常会做一些， 把网址送入到后台。 但是后台再处理的 不认识比如 换行啊 等特殊符号的 ？
var url = “http://www.itast.cn?name=cz”
所以我们要实现编码，然后再传到后台。
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码
decodeURIComponent() 函数可把字符串作为 URI 组件进行解码
完整源码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script>
var url = "http://www.itcast.cn?name=andy";
console.log(encodeURIComponent(url)); // 编码
var afterUrl = encodeURIComponent(url);
console.log(decodeURIComponent(afterUrl)); // 解码
</script>
结果：
结果
操作字符串
合并字符串 取字符串
#######1/ concat() 连接字符串
var txt1 = “abc”;
var txt2 = ”123”;
console.log(txt1.concat(txt2)); “abc123”;
#######2/slice()
slice(“取字符串的起始位置”, [结束位置]) ; [] 可选的
起始位置一定要有 结束位置可以省略
var txt = “abcedf”;
txt.slice(3) ; 从 txt 里面字符的 第 3（索引号）个开始取 结束位置省略， 一直取到最后一个。
总结 slice(3) 从第3个开始取，一直取到最后
slice(3,6) 3 从 第3个开始 取 6 取到第6索引号的位置，还是从左边的第0个开始数。 但是不包 6 。
6是这样看的
起始位置可以是负数 ， 如果是负数，则是从 右边往左边开始取。
var txt =”asdf”;
txt.slice(-1) 结果是 f
3/substr()
substr(起始位置,[取的个数])
同上。
不写取的个数， 默认从起始位置一直取到最后 。
取的个数： 是指从起始位置开始，往后面数几个。
var txt = “abcdefghijk”;
txt.substr(3,4);
从第3个 （d） 开始 数 4个 defg
**substr(-1) 少用 ie678 报错 。 尽量少用 **
兼容性的写法 ：
onBtnClick("btn7",div1.substr(div1.length-1,1)); // 兼容的写法
4/substring
substring同slice 一样的 但是有一点不同
substring(3,6)
substring 始终会把 小的值作为 起始位置 大的值作为结束位置
例如： substring(6,3) 实际中 自动变成 substring(3,6);
完整源码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function() {
var div1 = document.getElementById("div1").innerHTML;
var div2 = document.getElementById("div2").innerHTML;
function onBtnClick(id,txt) {
document.getElementById(id).onclick = function() {
this.nextSibling.innerHTML = txt;
//他的下一个兄弟 内容变成 txt
}
}
onBtnClick("btn1",div1.concat(div2));
onBtnClick("btn2",div1.slice(3)); // 从第3个开始取，一直取到最后
onBtnClick("btn3",div1.slice(3,6)); // 3 从 第3个开始 取 6 取到第6索引号的位置，还是从左边的第0个开始数。 但是不包 6 。
onBtnClick("btn4",div1.slice(-1)); // 从右边开始取
//substr组
onBtnClick("btn5",div1.substr(3)); //
onBtnClick("btn6",div1.substr(3,6)); //
onBtnClick("btn7",div1.substr(div1.length-1,1)); // 兼容的写法
// substring 组
onBtnClick("btn8",div1.slice(6,3));
onBtnClick("btn9",div1.substring(6,3));
}
</script>
</head>
<body>
<div id="div1">my name is andy!</div>
<div id="div2">what's your name?</div>
<button id="btn1">concat</button><span></span> <br/>
<button id="btn2">slice(3)</button><span></span> <br/>
<button id="btn3">slice(3,6)</button><span></span> <br/>
<button id="btn4">slice(-1)</button><span></span> <br/>
<button id="btn5">substr(3)</button><span></span> <br/>
<button id="btn6">substr(3，6)</button><span></span> <br/>
<button id="btn7">substr(-1) 兼容</button><span></span> <br/>
区别
<button id="btn8">slice(6,3)</button><span></span> <br/>
<button id="btn9">substring(6,3)</button><span></span> <br/>
保留小数位数
122340.12345 保留两位有效小数 122340.12
substr(0, .+3)
1.console.log(str.substr(0,str.indexOf(".")+3));
通过 indexOf 返回小数点的位置 截取字符串
解释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script>
var PI = 1213.141592653; //常量大写
var str = PI + ""; //因为数字没法进行字符操作 先转换
var index = str.indexOf("."); //我们要返回当前字符的点的位置indexOf(".")
console.log(index);
console.log(str.substr(0,index+3));
console.log(str.substr(0,str.indexOf(".")+3));
</script>
2 console.log(parseInt(PI*100) /100);
先乘以100 取整 然后 除以100
3 console.log(PI.toFixed(2));
pi.toFixed(2) 保留 2位 小数
大小写转换
asdf = ASDF
ASDF -- asdf
1 toUpperCase，转换为大写（参数： 无）
2 toLowerCase，转换为小写（参数：无）
asdf.toUpperCase() 结果就是： ASDF
$("txt").value.toUpperCase();
把txt 的值 转换为大写
完整源码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 id="big">这是大标题</h1>
<p id="small">这个是小标题</p>
<input type="text" id="txt"/> <button id="btn">发布</button>
</body>
</html>
<script>
function $(id) { return document.getElementById(id)}
$("btn").onclick = function(){
$("big").innerHTML = $("txt").value.toUpperCase();
$("small").innerHTML = $("txt").value.toLowerCase();
}
</script>
案例：上传正常格式文件，验证是否为JPG
源码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="file" name="" id="File"/><span></span> <!--文件域-->
</body>
</html>
<script>
var file = document.getElementById("File");
file.onchange = function() {
//alert(11);
//alert(this.value); // c:/adfasdf.ss.jpg 需要点 从后面开始 再字符串中的位置
var path = this.value; // 得到的是现在的文件路径
var suxxif = path.substr(path.lastIndexOf(".")).toUpperCase()
// 得到的是 后缀名 并且转换为大写
//alert(suxxif);
if(suxxif == ".JPG" || suxxif == ".PNG")
{
this.nextSibling.innerHTML = "格式正确";
}
else
{
this.nextSibling.innerHTML = "格式错误的";
}
}
</script>
今日重点：
根据位置返回字符
asdfg.charAt(3) f
根据字符返回位置
asdfgg.indexOf(“f”) 3 从前面索引
lastIndexOf(“g”) 5 从后面索引
**slice(起始位置，[ 结束位置 ]) **
slice(3) 从第3个开始选 slice(3,6) 从索引号3开始取，数6个 **但是从索引号0 开始数 **
var arr = [1,3,5,7];
asdfghidk fgh
substr(起始位置,[取的个数])
substr(3,6) 从3开始选 从第三个开始数 往后 数 6个 fghidk
toFixed(2)
