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()方法,检索第二个字符o出现的位置。

<!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.
本笔记整理自慕课网

推荐阅读更多精彩内容

  • 什么是对象JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等,每个对象带有属性和方法。对象...
    阿r阿r阅读 134评论 0 9
  • 变量命名、声明、赋值 1.必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。2.变量名区分...
    wq04200阅读 90评论 0 1
  • 1. 什么是对象 JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等,每个对象带有属性和方...
    jasmine_jing阅读 31评论 0 0
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    千机楼阅读 637评论 0 0
  • 1. javascript删除元素节点 IE中有这样一个方法:removeNode(),这个方法在IE下是好使的,...
    落魂灬阅读 84评论 0 1