字符串的创建
字符串是JavaScript的一种基本的数据类型。它用来存储和处理文本。
如何去创建一个字符串呢?我们可以这样做:
var name = "my name is danjie";
var name = 'my name is danjie';
在创建时,我们可以在字符串中使用引号,只要不是和创建时的引号相同(若是使用双引号创建,里面就全部用单引号,反之亦然)即可,例如:
var name = "my name is 'danjie'";
var name = 'my name is "danjie"';
但是有些时候,我们可能会想要表达如下语句:
var str = 'it's okay';
这时的创建就会出问题,因为在it后字符串就被截断了,要想解决这种问题,第一个办法是用双引号创建,但是如果我们这样创建了之后,可能又要创建这样的字符串:
var str = "it's called "the Great Wall"";
这时便需要使用转义字符"\"了。
在内容中与创建方法相同的引号前加上\,这样字符串便不会被截断,同时也可以显示在内容里。
var str = "it's called \"the Great Wall\"";
- 长代码行换行
我们在编码规范中规定了一行的长度不超过120个字符,有时我们的字符串过长,想要换行,这时要怎么做呢?
document.getElementById("test") = "········good enough·····";
例如我们之前字符串很长了,在good 和enough之间需要换行,我们可以使用反斜杠来换行,就像这样:
document.getElementById("test") = "········good \
enough·····";
但是这个方法并不是ECMAScript标准,所以我们最好使用运算符来换行,像这样:
document.getElementById("test") = "········good " +
"enough·····";
同样的,我们也可以在等号后换行
document.getElementById("test") =
"········good enough·····";
但是要注意的是,当不在字符串内换行时,使用反斜杠是错误的做法。
document.getElementById("test") = \
"········good enough·····";
字符串可以作为对象,当作为对象时,它的创建方法是这样的
var name = new String("danjie");
当我们对name使用typeof运算符时,它会返回object值,但是我们尽量不要把字符串创建为对象,会拖慢执行速度,还会有各种各样的问题。就拿字符串比较来说吧,如果我们创建了如下两个字符串。
var username = new String("danjie");
var hostname = new String("danjie");
当我们使用==
和===
来比较两个字符串时,这两个字符串就不能比较,因为它们都是对象,JavaScript中比较两个对象始终会返回false,因为它们是不同的对象。
对于一个字符串和字符串对象,同理可得,==
运算符可以返回true,===
运算符则返回false。
字符串的操作
属性
- 获取字符串的长度 length
.length属性返回字符串的长度
var name = 'danjie';
console.log(name.length);
- 返回创建字符串的函数 constructor
.constructor返回字符串的创建函数
var name = 'danjie';
console.log(name.constructor);
此时显示的是String()。证明字符串是由String()方法创建的,这个方法同样也适用于其它的变量(Array,Boolean,Date等)。
- 为字符串创建属于自己的方法 prototype
String.prototype 属性表示 String原型对象。所有 String 的实例都继承自 String.prototype. 任何String.prototype上的改变都会影响到所有的 String 实例
有的时候我们想要对字符串的一些方法做出自定义的行为,例如我们想要添加一个.format()方法来替换字符串{}内的内容,便可以这样:
String.prototype.format = function(){
if(arguments.length==0){
return this;
}
for(var s=this, i=0; i<arguments.length; i++){
s = s.replace(new RegExp("\\{"+i+"\\}","g"), arguments[i]);
}
return s;
};
这时,我们便可以对一个String类型的变量使用.format()方法了。例如这样:
//方式1
var test = '我的{0}是{1}';
var result = test.format('名字','但杰');
//方式2
var test = '我的{name1}是{name2}';
var result = test.format({name1:'名字',name2:'但杰'});
所得到的的结果是
我的名字是但杰
方法及说明来自:https://www.php.cn/js-tutorial-388051.html。
常用方法
- trim() 去除字符串首尾空白
trim方法可以返回一个去除掉了首尾空白的字符串,注意并非修改了原字符串,所以如果你想要得到一个去掉首尾空白的字符串的话,需要用一个新的变量来接收trim方法的返回值。
var str = ' hello world ';
console.log(str); //显示内容为( hello world )
console.log(str.trim())显示内容为(hello world)
console.log(str); //显示内容为( hello world )
tempStr = str.trim();
console.log(tempStr); //显示内容为(hello world)
- toLowerCase()/toUpperCase() 将原字符串整体改为小写/大写
这两个方法可以讲字符串分别转换为大写和小写,同样地,它们也不会修改原字符串,所以如果想要修改后的字符串也需要用一个新的变量接收。
var firstStr = 'abcd';
var secondStr = 'ABCD';
console.log(firstStr.toUpperCase()); //显示内容为ABCD
console.log(secondStr.toLowerCase()); //显示内容为abcd
- indexOf()/lastIndexOf() 查找字符串中的字符串
这个方法返回字符串中指定文本首次出现的位置,例如:
var str = 'I want to have a cup of coffee because coffee makes me happy';
var pos = str.indexOf('coffee');
最终,pos的值为24。因为字符串的第一个位置是0。
我们也可以使用lastIndexOf()方法来查找字符串最后出现的位置,例如:
var str = 'I want to have a cup of coffee because coffee makes me happy';
var pos = str.lastIndexOf('coffee');
pos的值为39。
如果没有找到,indexOf()和lastIndexOf()均返回-1。同时他们也都接收起始位置为第二个参数。
- includes() ES6新增,是否找到了参数字符串
includes()方法检索字符串中是否含有参数字符串,若含有,则返回true,否则返回false。
var str = 'I want to have a cup of coffee because coffee makes me happy';
if(str.includes('coffee')) {
console.log(true);
} else {
console.log(false);
}
最终结果显示true。
- split() 将字符串转换为数组
这个方法可以以参数中的参数为分隔,将原字符串分为多个数组,需要用一个变量来接收。
var str = "a,b,c,d,e,f";
var arr = str.split(",");
console.log(a[2]);
最终显示结果为c。同时arr = ['a','b','c','d','e','f']。
- slice() 提取指定参数范围的字符串
slice()方法要求设定两个参数,第一个参数是起始位置,第二个参数是终止位置。它会返回这两个参数位置之间的字符串。
var str = "Apple, Banana, Mango";
var res = str.slice(7,13);
console.log(res);
最终结果为Banana。如果以负数为参数,则从结尾开始计数。例如:
var str = "Apple, Banana, Mango";
var res = str.slice(-13,-7);
console.log(res);
最终结果也是Banana。如果只有一个参数,则返回从参数之后的全部字符串。同样地,也是正数为从头开始,负数从结尾开始。但是负值不适用于IE8和更早的版本。
- subString() 提取指定参数范围的字符串
它类似于slice。但是它不能接收负的参数。所以就不多讲了。
- replace() 替换字符串内容
replace()方法用第二个参数来替换字符串中第一个参数的字符串的值。它默认替换首个匹配。
str = "Do you like Tea";
var n = str.replace("Tea", "Coffee");
最后,n的内容为 Do you like Coffee。但是需要注意的是,replace()对大小写敏感,我们可以通过使用正则表达式来指定它对大小写不敏感(/i)或者替换所有匹配(g)
- match() 检索指定的值
match()方法类似indexOf()和lastIndexOf(),但是它不返回位置,返回指定的值。如果匹配到,返回匹配的字符串,如果没有匹配的,则返回null。
var str="Hello world!"
console.log(str.match("Hello")); //显示Hello
console.log(str.match("hello")); //显示为null
console.log(str.match("aaa")); //显示为null
可以看出,match()对大小写敏感。