JS字符串

字符串的创建

字符串是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()对大小写敏感。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,723评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,080评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,604评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,440评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,431评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,499评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,893评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,541评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,751评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,320评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,890评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2 342

推荐阅读更多精彩内容

  • string类型 String 类型用于表示由零或多个 16位 Unicode字符组成的字符序列,即字符串。字符串...
    仙姑本姑阅读 248评论 0 0
  • 在JS中,字符串是六种数据类型之一,其重要程度不言而喻。JS中有一系列的内置方法可以对字符串进行操作,下面就一起来...
    大春春阅读 10,925评论 0 16
  • 原创声明 本文系作者辛苦码字所得,欢迎分享和转载,但请在明显位置注明作者的如下信息:笔名:来碗鸡蛋面简书主页:ht...
    来碗鸡蛋面阅读 637评论 0 3
  • JavaScript 字符串用于存储和处理文本。JavaScript 字符串字符串可以存储一系列字符,如 "Joh...
    我叫李大白阅读 286评论 0 0
  • 常用的js字符串函数集合 一、其他数据类型转换为字符串类型 (1).最直接的 给数据加引号(任何数据类型加上引号...
    Alexa_老王阅读 750评论 1 1