JS对象之string

JavaScript学习 本文总阅读量次

查找字符（串）的4种方法

charAt()查找字符

  • 语法:
    stringObject.charAt(index)
  • 功能:返回stringObject中index位置的字符.
    1
    2
    var str="hello world"; 
    console. log(str. charAt(4));//o
  • ES6中可以直接使用str[index]，与str.charAt(index)效果一样

charCodeAt()查找字符的编码

  • 语法:
    stringObject.charCodeAt(index)
  • 功能:
    返回stringObject中index位置字符的字符编码.
  • 说明：
    ECMAScript5中可使用“方括号加字符索引”来访问字符串中特定的字符，但是IE7及更早的浏览器会返回undefined。
    1
    2
    var str="hello world"; 
    console. log(str. charCodeAt(4));//111

indexOf()与lastIndexOf（）

  1. 和数组中的indexOf()与lastIndexOf（）类似
  2. 都可以查字符串的位置，不过返回的是第一个字符的位置

indexOf()返回字符（串）的位置

和数组中的indexOf()类似

  • 语法:
    stringObject.indexOf("o")
  • 功能:
    从一个字符串中搜索给定的子字符串,返回子字符串的位置.
  • 返回值:数值
  • 说明:如果没有找到该子字符串,则返回-1.

lastIndexOf()倒着查，返回字符（串）的位置

  • 语法:
    stringObject.lastIndexOf("o")

    o是你想查找的字符

  • 功能:
    倒着查，从一个字符串中搜索给定的子字符串,返回子字符串的位置
  • 返回值:数值
  • 说明:如果没有找到该子字符串,则返回-1
    1
    2
    3
    4
    5
    6
    var email = "marry.mail@sohu.com";
    //检测@在emai1中出现的位置
    console.log(email.indexOf("o")); //12
    console.log(email.indexOf("ar")); //1，可以查字符串的位置，不过返回的是第一个字符的位置
    console.log(email.lastIndexOf("."));//15
    console.log(email.lastIndexOf("ma"));//6

截取字符串的3种方法

slice()

和数组的slice()类似

  • 语法：stringValue.slice(start,end)
  • 功能:
    截取子字符串.
  • 参数说明:
  1. start:必需,指定子字符串的开始位置.
  2. end:可选,表示子字符串到哪里结束,end本身不在截取范围之内,省略时截取至字符串的未尾.
  3. 当参数为负数时 (注意：两个参数都适用),会将传入的负值与字符串的长度相加来得到起始位置 （参数值=字符串长度+负值）.
    1
    2
    3
    4
    5
    6
    7
    var str = "hello world";
    //截取orl 
    console.log(str.slice(7, 10));
    // 11-3=8，相當於str.slice(8)
    console.log(str.slice(-3));//rld
    // 11-7=4,11-2=9
    console.log(str.slice(-7,-2));//o wor

substring()

  • 语法及功能同slice()完全一样.
  • 区别:
    1. 当参数为负数时,自动将参数转换为0.
    2. substring()会将较小的数作为开始位置,将较大的数作为结束位置.
      1
      2
      3
      4
      5
      var str = "hello world";//11位
      //自动将参数转换为0.
      console.log(str.substring(-7,5));//(0,5),hello
      //将较小的数作为开始位置,将较大的数作为结束位置.
      console.log(str.substring(2,-5));//(0,2),he

substr()

  • 语法:
    stringValue.substr(start,len)
  • 功能:
    截取子字符串.
  • 参数说明:
  1. start:必需,指定子字符串的开始位置.
  2. len:可选,表示截取的字符总数,省略时截取至字符串的未尾.
  3. 当start为负数时,会将传入的负值与字符串的长度相加.（start参数值=字符串长度+负值） 【注意这里和以往不一样，不是两个参数了】
  4. 当len为负数时,返回空字符串.
    1
    2
    3
    4
    var str = "hello world";//11位
    console.log(str.substr(6, 3)); //wor
    console.log(str.substr(-5, 4));//相當於(6,4),worl
    console.log(str.substr(3, -4));//空

获取扩展名实例

1
2
3
4
5
6
7
8
9
10
// 获取扩展名
function getFileFormat(url){
    // 获取.在url中出现的位置
    var pos=url.lastIndexOf(".");
    return url.substr(pos+1);
}
var baidu="http://baidu.com/index.txt";
var formatName=getFileFormat(baidu);
var picFormat=getFileFormat("1231212.jpg");
console.log(formatName,picFormat);//txt png

编程练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 编程练习：用户输入登录的邮箱，对邮箱进行解析，解析出邮箱的用户名和邮箱的域名
var email=prompt("请输入登录邮箱");
function getName(email){
    // 获取@在email中的位置
    var at=email.indexOf("@");
    // 截取@前的字符串得到用户名
    return email.substring(0,at);
}
function getDomainName(email){
    // 获取@在email中的位置
    var at=email.indexOf("@");
    // 截取@后的字符串得到域名
    return email.substring(at+1);
}
// 要注意换行符"<br/>"在双引号里面
document.write("邮箱的用户名是："+getName(email)+"<br/>"+"登录的邮箱域名是："+getDomainName(email));

split()字符串转换为数组

  • 正好相反，数组中的join()方法是将数组转换为字符串
  • 语法:stringObject.split(separator)
    • separator:必需,分隔符。分隔符可以是字符串
  • 功能:把一个字符串分割成字符串数组.
  • 返回值:Array.

replace()替换字符串

  • 注意：它不会影响原来的字符串，它是产生新的字符串。
  • 语法:
    stringObject.replace(regexp/substr,replacement)

    即：stringObject.replace(替换前字符（串）,替换后字符（串）)

    • regexp:必需.规定子字符串或要替换的模式的RegExp对象.
    • 如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。
    • replacement:必需.一个字符串值.
  • 功能:在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串.
  • 返回值:String
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var str = 'welcome-to-beijing';
//使用split将str转换为数组
var arr = str.split("-");
console.log(arr);//["welcome", "to", "beijing"]
var date = '2016/05/05';
var dateArr = date.split("/");
console.log(dateArr);//["2016", "05", "05"]
// 看来分隔符可以是字符串
var date2 = '2016//05//05';
var dateArr2 = date2.split("//");
//替换
var tel = '010-62971268,400-100-9098,010-867898891';
//newTel:被替换之后的字符串
var newTel = tel.replace(',', " ");
console.log(tel);//010-62971268,400-100-9098,010-867898891
console.log(newTel);//010-62971268 400-100-9098,010-867898891
//newTel2:被替换之后的字符串,只替换第一个匹配子串
var tel2 = '010-62971268,,400-100-9098,,010-867898891';
var newTel2 = tel2.replace(',,', " ");
console.log(newTel2);//010-62971268 400-100-9098,,010-867898891
// 使用正则，加上全局标志 g，则替换所有匹配子串
var tel3 = '010-62971268,,400-100-9098,,010-867898891';
var newTel3 = tel3.replace(/,,/g, " ");
console.log(newTel3);//010-62971268 400-100-9098 010-867898891

字符串转换大小写

toUpperCase()转大写

  • 语法:stringValue.toUpperCase()
  • 功能:把字符串转换为大写.
    1
    2
    3
    var str="hello world";
    var upper=str.charAt(6).toUpperCase();
    console.log(upper);//W

toLowerCase()转小写

  • 语法:stringValue.toLowerCase()
  • 功能:把字符串转换为小写.
    1
    2
    var str2="WELCOME";
    console.log(str2.toLowerCase());//welcome

案例：将字符串 border-left-color转换成borderLeftColor（驼峰形式）

1
2
3
4
5
6
7
8
9
10
11
function camelBack(str){
    // 通过“-”将字符串str拆分为数组
    var arr=str.split("-"),
        newStr=arr[0];//数组第一项不用变大写所以一开始就可以指定arr[0]为newStr
    // console.log(arr);// ["border", "left", "color"]
    for(var i=1,len=arr.length;i<len;i++){//i从1开始，因为数组第一项不用变大写
        // 遍历数组,改变除第一个单词之外的所有单词的首字母并连接剩余字符
        newStr += arr[i].charAt(0).toUpperCase()+arr[i].substr(1);
    }console.log(newStr);//borderLeftColor
}
var camelFormat=camelBack("border-left-color");

编程练习

小伙伴们,我们学习了string的转化大小写的方法,那么接下来任务来了,将字符串”Never deter till tomorrow that which you can do today”的”tomorrow”转化为大写.

1
2
3
4
5
6
7
8
9
10
11
// 将字符串"Never deter till tomorrow that which you can do today"的"tomorrow"转化为大写
var str="Never deter till tomorrow that which you can do today";
// 获取tomorrow位置
var t=str.indexOf("tomorrow");
// console.log(t,str.indexOf("w"));//17 24
// 截取
var tm=str.substring(17,25);
// console.log(tm);
// 改为大写并替换
var newStr=str.replace(str.substring(17,25),tm.toUpperCase());
console.log(newStr);//Never deter till TOMORROW that which you can do today

trim()删除头尾空格

  • trim() 方法用于删除字符串的头尾空格。
  • 语法：string.trim()
  • trim() 方法不会改变原始字符串。
  • 例子

正则表达式删除头尾空格

如果你的浏览器不支持 trim() 方法，你可以使用正则表达式来实现:

1
2
3
4
5
6
7
8
function myTrim(x) {
  return x.replace(/^\s+|\s+$/gm,'');
}
 
function myFunction() {
  var str = myTrim("        Runoob        ");
  alert(str);
}

(完整例子)

  • 生成正则表达式对象：const regexp1=/规则/修饰符;
  • 修饰符：g表示全局匹配，m表示多行匹配。
  • 规则：
    • 定位符：^ 输入字符串开始的位置，$ 输入字符串结尾的位置。
    • \s匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。注意 Unicode 正则表达式会匹配全角空格符。
    • |指明两项之间的一个选择。要匹配 |，请使用 \|。
    • +匹配前面的子表达式一次或多次。例如，zo+ 能匹配 “zo” 以及 “zoo”，但不能匹配 “z”。+ 等价于 {1,}。

总结：也就是说，如果x以一个或多个空格开始，替换全部空格为空（^\s+）；或者(|)，如果x以一个或多个空格结束(\s+$)，替换全部空格为空。

JavaScript学习