JS内置对象：String字符

一、String 字符串对象

定义字符串的方法就是直接赋值。
比如：

var mystr = "I love JavaScript!"

定义mystr字符串后，我们就可以访问它的属性和方法。

1/访问字符串对象的属性length:

stringObject.length; //返回该字符串的长度。

【例如】

var mystr="Hello World!";
var myl=mystr.length;

以上代码执行后，myl 的值将是：12

2/访问字符串对象的大小写变化：toUpperCase()与toLowerCase()

【语法】：

stringObject.toUpperCase()

【功能】：把字符串转换为大写。

【语法】：

stringObject.toLowerCase()

【功能】：把字符串转换为小写。

【案例】：使用 String 对象的 toUpperCase() 方法来将字符串小写字母转换为大写：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>string对象 </title>
  <script type="text/javascript">
    var message="I love JavaScript!";
    var mychar= message.toUpperCase();
    document.write("字符串为："+mychar+"<br>");
</script>
</head>
<body>
</body>
</html>

【备注】
如果是变小写，则 message.toUpperCase()替换为message.toLowerCase();

二、返回指定位置的字符charAt()

方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。

【语法】:

stringObject.charAt(index)

【参数说明】：
index：必需。表示字符串中某个位置的数字，即字符在字符串中的下标。

【注意】:
1:字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一（string.length-1）。
2:如果参数 index 不在 0 与 string.length-1 之间，该方法将返回一个空字符串。
3:一个空格也算一个字符。

【案例】返回最后一个字符。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>string对象 </title>
  <script type="text/javascript">
  var mystr="I love JavaScript!"
  document.write(mystr.charAt(mystr.length-1));
</script>
</head>
<body>
</body>
</html>

三、返回指定的字符串首次出现的位置indexOf()

indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。

【语法】:

stringObject.indexOf(substring, startpos)

【参数说明】:
substring：必需。规定需检索的字符串值。
startpos：可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是0到stringObjectlength-1.如果省略该参数，则将从字符串的首字符开始检索。

【语法说明】：
1.该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 substring。
2.可选参数，从stringObject的startpos位置开始查找substring，如果没有此参数将从stringObject的开始位置查找。
3.如果找到一个 substring，则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。

【注意】：
1:indexOf() 方法区分大小写。
2:如果要检索的字符串值没有出现，则该方法返回 -1。

【案例】使用indexOf()方法，检索第二个字符ｏ出现的位置。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>string对象 </title>
<script type="text/javascript">
  var mystr="Hello World!"
  document.write(mystr.indexOf('o',mystr.indexOf('o')+1));
</script>
</head>
<body>
</body>
</html>

【结果】为7

四、掌握字符串对象的方法：split()和replace()

- 1/字符串分割split()

split() 方法将字符串分割为字符串数组，并返回此数组。
【语法】：

stringObject.split(separator,limit)

【参数说明】：
separator 必需。从该参数指定的地方分割stringObject。
limit 可选参数，分割的次数，如设置该参数，返回的子串不会多于这个参数指定的数组，如果无此参数为不限制次数。

【注意】
如果把空字符串（""）用作separator，那么stringObject中的每个字符之间都会被分割。

【案例】：
运用split()方法，完成以下任务，并输出:1.以字符"-"分隔字符串对象mystr。2. 将字符串对象mystr每个字符分割。3. 将字符串对象mystr分割成字符，分割3次。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
var mystr="86-010-85468578";
document.write(mystr.split("-")+ "<br />");//1.以字符"-"分隔字符串对象mystr
document.write(mystr.split("")+ "<br />");//2. 将字符串对象mystr每个字符分割。
document.write(mystr.split("-",3));//3. 将字符串对象mystr分割成字符，分割3次。
</script>
</head>
<body>
</body>
</html>

【结果】



【案例】：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>string综合应用</title>
</head>
<body>
  <script>
    var str="tom/how/are/you/doing/today";
    var arr=str.split("/");
    console.log(arr);
  </script>
</body>
</html>

【结果】：


2/replace替换

【语法】：

stringObject.replace(regexp/substr,replacement)

【功能】：
在字符串中用一些字符替换另一些字符，或替换一个与正则式匹配的子串。

【返回值】：string

【参数】：
regexp:必需。规定子字符串或要替换的模式的RegExp对象。
replacement:必需。一个字符串值。

【案例】：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>string综合应用</title>
</head>
<body>
  <script>
     //替换
     var tel="010-62971268,400-100-9098,010-86789889";
     var newTel=tel.replace(",","  ");
     console.log(newTel);
  </script>
</body>
</html>

【结果】：


五、提取字符串：slice()、substring()、substr()

- 1/提取字符串slice()

【语法】：

stringObject.slice(start,end)

【功能】：
截取子字符串。

【参数说明】：
1.start：必需，指定子字符串的开始位置。
2.end：可选，表示子字符串到哪里结束，
若end本身不在截取范围之内（即end-1），省略时截取至字符串的末尾。
3.当为负数时，其值为字符串长度+该负数

【案例】：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var str="hello world";
    //截取orl
    console.log(str.slice(7,10));
</script>
</body>
</html>

-2/ 提取字符串substring

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

【语法】:

stringObject.substring(startPos,stopPos)

startPos 必需。一个非负的整数，开始位置。
stopPos 可选。一个非负的整数，结束位置，如果省略该参数，那么返回的子串会一直到字符串对象的结尾。

说明：
console.log(str.substring(-7,5));//当第一个为负值时直接等同于0，即(0,5)
console.log(str.substring(2,-5));//当第二个数值比第一个小的时候，直接调整顺序为小到大截取，即（0,2）

【注意】：
1:返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。
2:如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
3:如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。

【案例】：
运用substring()方法，完成子字符串Hello World!的提取:1.从字符对象mystr中提取World!子字符串。2. 从字符对象mystr中提取Hello子字符串。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>string对象</title>
<script type="text/javascript">
var mystr="Hello World!"
document.write(mystr.substring(6)+ "<br />");
document.write(mystr.substring(0,5));
</script>
</head>
<body>
</body>
</html>

【结果】


★【辨析】substring()与slice()

它俩语法及功能完全一样。
区别在于：
1.当substring()参数为负数时，自动将参数转换为0.
2.substring()会将较小的数作为开始位置，将较大的数作为结束位置。

- 3/提取指定数目的字符substr()

substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。

【语法】:

stringObject.substr(startPos,length)

【参数说明】
startPos 必需。要提取的子串的起始位置。必须是数值。
length 可选。提取字符串的长度。如果省略，返回从stringObject的开始位置startPos到stringObject的结尾的字符。

【注意】
如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。

如果startPos为负数且绝对值大于字符串长度，startPos为0。

【案例】

运用substr()方法，完成以下任务:1.提取字符world!。2.提取字符Hello。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>substr()</title>
<script type="text/javascript">
var mystr="Hello World!";
document.write( mystr.substr(6)+ "<br />");
document.write(mystr.substr(0,5));
</script>
</head>
<body>
</body>
</html>

★综合应用1

掌握字符串方法的综合应用：
编写js函数，用于获得输入参数的后缀名，如输入abc.txt，返回.txt

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>string综合应用</title>
</head>
<body>
  <script>
      //获取扩展名
      var url="http://baidu.com/index.txt";
      function getFileFormat(url){
        //获取.在url中出现的位置
        var pos=url.lastIndexOf(".");
        return url.substr(pos);
      }
      var formatName=getFileFormat(url);
      var picForamt=getFileFormat("1231434.jpg");
      console.log(formatName);
      console.log(picForamt);
  </script>
</body>
</html>

【结果】：

★综合应用2

将border-left-color 转化为borderLeftColor驼峰形式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>border-left-color转化为borderLeftColor</title>
</head>
<body>
  <script>
    //border-left-color  borderLeftColor//驼峰形式
    function camelback(str){
        //通过-这个分隔符将str拆分成数组
        var arr=str.split("-"),newStr=arr[0];
        //console.log(arr);//["border","left","color"]
        //newStr="border";
        for(var i=1,len=arr.length;i<len;i++){
            var word=arr[i];
            //console.log(world);
            //将每一个单词的首字母转换为大写,连接剩余字符
            newStr+=word.charAt(0).toUpperCase()+word.substr(1);
            //console.log(newStr);
            //newStr=borderLeftColor
        }
        return newStr;

    }
    var camelFormat=camelback("border-left-color");
    console.log(camelFormat);
  </script>
</body>
</html>

end.
本笔记整理自慕课网

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,332评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,508评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,812评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,607评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,728评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,919评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,071评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,802评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,256评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,389评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,032评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2赞 350

推荐阅读更多精彩内容

  • JS内置对象
    什么是对象JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。对象...
    阿r阿r阅读 438评论 0赞 9
  • JS基本
    变量命名、声明、赋值 1.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。2.变量名区分...
    wq04200阅读 622评论 0赞 1
  • JavaScript内置对象
    1. 什么是对象 JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方...
    jasmine_jing阅读 308评论 0赞 0
  • 第5章 引用类型
    第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,219评论 0赞 4
  • 『总结』JS常用方法与片段
    1. javascript删除元素节点 IE中有这样一个方法:removeNode()，这个方法在IE下是好使的，...
    落魂灬阅读 321评论 0赞 1