继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【JavaScript高程总结】string(字符串)

慕哥9229398
关注TA
已关注
手记 1241
粉丝 199
获赞 913

1.字符串创建

var stringObject = new String("hello world");//或者var stringValue = "hello world";

str.length

Strin类型的每一个实例都有一个length属性,表示字符串中包含多少个字符


2.字符方法

这两个方法用于访问字符串中的特定字符

charAt()

接受一个参数及字符位置;

var stringValue = "hello world";
alert(stringValue.charAt(1));   //"e"

charCodeAt()

如果你想的得到的不是字符而是字符编码

var stringValue = "hello world";
alert(stringValue.charCodeAt(1)); //  "101"101就是小写e的字符编码

ES5中定义的str[]方法也可以做到上面charAt()做到的事ie7以下版本可能不太行

var stringValue = "hello world";
alert(stringValue[1]);   //"e"

2.字符串操作方法

concat()(拼接字符串但是实践中一般是用“+”来拼接)

参数可以是多个,也就是可以拼接多个字符串

var stringValue = "hello ";var result = stringValue.concat("world"); 
alert(result); //"hello world" alert(stringValue); //"hello"

下面三个方法都返回别操作字符串的一个子字符串,而且都接受一或两个参数
第一个参数:指定子字符串的开始位置
第二个参数:表示子字符串到哪里结束;slice()substring()这个参数表示结束的index;substr()表示个数(可选)

slice()

substr()

substring()

var stringValue = "hello world";
alert(stringValue.slice(3));  //"lo world"alert(stringValue.substring(3));  //"lo world"alert(stringValue.substr(3));   //"lo world" alert(stringValue.slice(3, 7));  //"lo w"alert(stringValue.substring(3,7));//"lo w"alert(stringValue.substr(3, 7)); //"lo worl"

参数出现负数
var stringValue = "hello world";
alert(stringValue.slice(-3));//"rld"
alert(stringValue.substring(-3));//"hello world"
alert(stringValue.substr(-3));//"rld"
alert(stringValue.slice(3, -4)); //"lo w"
alert(stringValue.substring(3, -4)); //"hel"
alert(stringValue.substr(3, -4)); //""(空字符串)


3.字符串位置方法

这两个都是从字符串中查找子字符串的方法
从一个字符串中搜索给定的子字符串;然后返回子字符串的位置(如果没找到该子字符串返回-1

indexOf()(从头开始查找)

lastIndexOf()(从末尾开始查找)

var stringValue = "hello world";
alert(stringValue.indexOf("o"));             //4alert(stringValue.lastIndexOf("o"));         //7

可以接受第二个可选参数;
indexOf()会从该参数指定位置开始搜索忽略该参数指定位置之前的所有字符
lastIndexOf()则会从指定位置行前搜索忽略指定位置之后的所有字符

var stringValue = "hello world";
alert(stringValue.indexOf("o", 6));         //7alert(stringValue.lastIndexOf("o", 6));     //4

因此你可以通过循环调用indexOf()或lastIndexOf()找到所有匹配字符;如下

var stringValue = "Lorem ipsum dolor sit amet, consectetur adipisicing elit"; var positions = new Array();var pos = stringValue.indexOf("e");while(pos > -1){
    positions.push(pos);
    pos = stringValue.indexOf("e", pos + 1);
}
alert(positions);    //"3,24,32,35,52"

4.去除字符串前后空格

trim()(更具被操控字符串创建一个字符串副本,删除前置及后缀的所有空格(不包括中间))

var stringValue = "   hello world   ";var trimmedStringValue = stringValue.trim();
alert(stringValue);            //"   hello world   "alert(trimmedStringValue);     //"hello world"

webp

image.png


5.字符串大小写转换

一般情况下在不知道自己代码在那种语言环境运行,使用针对地区的方法稳妥些

toLowerCase()转换为小写(经典方法)

toLocaleLowerCase()转换为小写(针对地区的方法)

toUpperCase()转换为大写(经典方法)

toLocaleUpperCase()转换为大写(针对地区的方法)

var stringValue = "hello world";
alert(stringValue.toLocaleUpperCase());  //"HELLO WORLD"alert(stringValue.toUpperCase());        //"HELLO WORLD"alert(stringValue.toLocaleLowerCase());  //"hello world"alert(stringValue.toLowerCase());        //"hello world"

6.字符串的模式匹配方法

match()

返回匹配到的第一个字符串以数组形式;
本质上与 RegExp的exec()方法相同;
接受一个参数正则表达式或RegExp对象

var text = "cat, bat, sat, fat";var pattern = /.at/;//与pattern.exec(text)相同  var matches = text.match(pattern); 
alert(matches.index); //0 alert(matches[0]); //"cat" alert(pattern.lastIndex); //0

search()

返回第一个匹配项的索引;
唯一参数与match()参数相同;没找到返回-1

var text = "cat, bat, sat, fat";var pos = text.search(/at/);
alert(pos);   //1

replace()

接受两个参数
第一个RegExp对象或字符串
第二个字符串或函数
如果第一个参数是字符串那么只会替换一个字符串
要替换所有字符串为一份办法是提供正则表达式还要指定全局(g)

var text = "cat, bat, sat, fat";var result = text.replace("at", "ond");
alert(result);    //"cond, bat, sat, fat"result = text.replace(/at/g, "ond");
alert(result);    //"cond, bond, sond, fond"

webp

image.png

第二个参数为函数
下面这个例子通过函数处理每一个匹配到的值如果是特殊符号就转义
一函数作为参数的重点就是清除函数默认参数都是什么

function htmlEscape(text){    return text.replace(/[<>"&]/g, function(match, pos, originalText){        switch(match){            case "<":                return "&lt;";            case ">":                return "&gt;";            case "&":                return "&amp;";            case "\"":                return "&quot;";
        } 
    });
}
    
alert(htmlEscape("<p class=\"greeting\">Hello world!</p>")); 
//输出:&lt;p class=&quot;greeting&quot;&gt;Hello world!&lt;/p&gt;

.split()

可将一个字符串通过指定参数分隔成多个字符串;返回数组(第二个参数规定返回数组的大小)

var colorText = "red,blue,green,yellow";
var colors1 = colorText.split(",");//["red", "blue", "green", "yellow"]
var colors2 = colorText.split(",", 2);  //["red", "blue"]
var colors3 = colorText.split(/[^\,]+/);  //["", ",", ",", ",", ""]

7.localeCompare()

localeCompare()

webp

image.png

var stringValue = "yellow"; 
alert(stringValue.localeCompare("brick")); //1 alert(stringValue.localeCompare("yellow")); //0 alert(stringValue.localeCompare("zoo")); //-1

webp

image.png

function determineOrder(value) {    var result = stringValue.localeCompare(value);    if (result < 0){
        alert("The string 'yellow' comes before the string '" + value + "'.");
    } else if (result > 0) {
        alert("The string 'yellow' comes after the string '" + value + "'.");
    } else {
        alert("The string 'yellow' is equal to the string '" + value + "'.");
    }
}
determineOrder("brick");
determineOrder("yellow");
determineOrder("zoo");

8.fromCharCode()

fromCharCode()

接受一或者多个字符编码将他们转换为字符串
本质上是执行charCodeAt()相反的操作

alert(String.fromCharCode(104, 101, 108, 108, 111)); //"hello"



作者:动感超逗
链接:https://www.jianshu.com/p/9951b92266ff


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP