【JavaScript】内置对象split、indexOf、replace、substring、charAt、slice、push、pop

李桥桉

已于 2023-07-10 16:56:52 修改

阅读量1.7k

点赞数 2

分类专栏：前端文章标签： javascript 前端

于 2023-07-05 17:56:30 首次发布

本文链接：https://blog.csdn.net/wodegecsdn/article/details/131559208

版权

前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

一、分割字符串——split（）

在JavaScript中，我们可以使用split（　）方法把一个字符串分割成一个数组，
这个数组存放的是原来字符串的所有字符片段。
有多少个片段，数组元素个数就是多少。

语法

字符串名.split（"分割符"）

说明
分割符可以是一个字符、多个字符或一个正则表达式。
此外，分割符不作为返回的数组元素的一部分。
有点难理解？我们还是先来看一个例子。

举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var str="HTML,CSS,JavaScript";
         var arr=str.split（","）;
         document.write（"数组第1个元素是："+arr[0]+"<br/>"）;
         document.write（"数组第2个元素是："+arr[1]+"<br/>"）;
         document.write（"数组第3个元素是："+arr[2]）;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果如下图所示。
在这里插入图片描述
分析
str.split（“,”）表示使用英文逗号作为分割符来分割str这个字符串，
结果会得到一个数组：[“HTML”,“CSS”,“JavaScript”]，
我们把这个数组赋值给变量arr保存起来。

可能有人会问：为什么分割字符串之后，系统会把这个字符串转换成一个数组？
这是因为转换成数组之后，我们就能使用数组的方法来更好地进行操作。

上面的这个例子，也可以使用for循环来输出，实现代码如下。

var str="HTML,CSS,JavaScript";
var arr=str.split（","）;
for（var i=0; i < arr.length; i++）
{
    document.write（"数组第"+（i+1）+"个元素是："+arr[i]+"<br/>"）;
}

举例：str.split（" "）（有空格）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var str="I love javascript";
         var arr=str.split（" "）;
         document.write（"数组第1个元素是："+arr[0]+"<br/>"）;
         document.write（"数组第2个元素是："+arr[1]+"<br/>"）;
         document.write（"数组第3个元素是："+arr[2]）;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果如下。

数组第1个元素是：I
数组第2个元素是：love
数组第3个元素是：javascript

分析
str.split（" "）表示用空格来分割字符串。在字符串中，空格也是作为一个字符来处理的。

str.split（" “）的两个引号之间是有一个空格的。str.split（” “）（有空格）是带有1个字符的字符串。str.split（”"）（无空格）是带有0个字符的字符串，也叫空字符串。两者是不一样的，我们可以通过下面这个例子来对比理解。

举例：str.split（“”）（无空格）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var str="ABCD";
         var arr=str.split（""）;
         document.write（"数组第1个元素是："+arr[0]+"<br/>"）;
         document.write（"数组第2个元素是："+arr[1]+"<br/>"）;
         document.write（"数组第3个元素是："+arr[2]+"<br/>"）;
        document.write（"数组第4个元素是："+arr[3]+"<br/>"）;
  </script>
</head>
<body>
</body>
</html>

浏览器预览效果如下：

数组第1个元素是：A
数组第2个元素是：B
数组第3个元素是：C
数组第3个元素是：D

分析
注意，split（" “）和split（”"）是不一样的。前者两个引号之间有空格，表示用空格作为分割符来分割。后者两个引号之间没有空格，可以用来分割字符串的每一个字符。这个技巧非常棒，也用得很多，小伙伴们可以记一下。

实际上，split（　）方法有两个参数：第1个参数表示分割符，第2个参数表示获取“分割之后的前n个元素”。第2个参数我们很少用，了解一下即可。

举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var str="2023-07-01-18-30";
         var arr=str.split（"-",3）;
         document.write（arr）;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果如下

2023，07，01

最后，数组join（　）方法一般都是配合字符串的split（　）方法来使用的。

二、检索字符串的位置——indexOf（）

在JavaScript中，使用indexOf（　）方法可以找出“某个指定字符串”在字符串中“首次出现”的下标位置，使用lastIndexOf（　）方法可以找出“某个指定字符串”在字符串中“最后出现”的下标位置。

语法

字符串名.indexOf（指定字符串）
字符串名.lastIndexOf（指定字符串）

说明
如果字符串中包含“指定字符串”,indexOf（　）会返回指定字符串首次出现的下标，而lastIndexOf（　）会返回指定字符串最后出现的下标；如果字符串中不包含“指定字符串”,indexOf（　）或lastIndexOf（　）会返回-1。

举例：indexOf（　）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var str="Hello Joan!";
         document.write（str.indexOf（"loan"）+"<br/>"）;
         document.write（str.indexOf（"Joan"）+"<br/>"）;
         document.write（str.indexOf（"Joaner"））;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果如下图所示。
在这里插入图片描述
分析
对于str.indexOf（“loan”），由于str不包含“loan”，所以返回-1。

对于str.indexOf（“Joan”），由于str包含“Joan”，所以返回“Lvye”首次出现的下标位置。字符串的位置是从0开始的。

对于str.indexOf（“Joaner”），由于str不包含“Joaner”，所以返回-1。需要注意的是，str包含“Lvye”，但不包含“Lvyer”。

在实际开发中，indexOf（　）用得非常多，我们要重点掌握。对于检索字符串，除了indexOf（　）这个方法外，JavaScript还为我们提供了另外两种方法：match（　）和search（　）。

这3种方法大同小异，我们只需要掌握indexOf（　）就可以了。为了减轻记忆负担，对于match（　）和search（　），我们可以直接忽略。
举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var str="Hello Lile!";
         document.write（"e首次出现的下标是："+str.indexOf（"e"）+"<br/>"）;
         document.write（"e最后出现的下标是："+str.lastIndexOf（"e"））;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果如下所示。
在这里插入图片描述
分析
indexOf（　）和lastIndexOf（　）不仅可以用于检索字符串，还可以用于检索单个字符。

三、替换字符串——replace（）

在JavaScript中，我们可以使用replace（　）方法来用一个字符串替换另外一个字符串的某一部分。
语法

字符串名.replace（原字符串，替换字符串）
字符串名.replace（正则表达式，替换字符串）

说明
replace（　）方法有两种使用形式：一种是直接使用字符串来替换，另外一种是使用正则表达式来替换。无论是哪种形式，“替换字符串”都是第2个参数。
举例：直接使用字符串替换

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var str="I love javascript!";
         var str_new=str.replace（"javascript","joan"）;
         document.write（str_new）;
    </script>
</head>
<body>
</body>
</html>

运行结果

I love joan

分析
str.replace（“javascript”,“joan”）表示用"joan"替换str中的"javascript"。

使用“正则表达式”替换

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var str="I am loser,you are loser,all are loser.";
         var str_new=str.replace（/loser/g,"hero"）;
         document.write（str_new）;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果
在这里插入图片描述
分析
str.replace（/loser/g, “hero”）表示使用正则表达式/loser/g结合替换字符串"hero"，来将字符串str中的所有字符“loser”替换成“hero”。

有些小伙伴会觉得str.replace（/loser/g, “hero”）不就等价于str.replace（“loser”, “hero”）吗？
其实这两个是不一样的，大家可以测试一下。前者会替换所有的“loser”，而后者只会替换第1个“loser”。

在实际开发中，如果我们直接使用字符串无法实现替换，记得考虑使用正则表达式。

四、截取字符串——substring（start,end）

在JavaScript中，我们可以使用substring（　）方法来截取字符串的某一部分。
语法

字符串名.substring（start,end）

说明
start表示开始位置，end表示结束位置。start和end都是整数，一般都是从0开始，其中end大于start。

substring（start,end）的截取范围为“[start,end）”，也就是包含start，但不包含end。其中，end可以省略。当end省略时，截取的范围为“start到结尾”。

举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var str1="前端，给你魔鬼般的感觉";
        var str2=str1.substring（5,7）;
        document.write（str2）;
  </script>
</head>
<body>
</body>
</html>

运行结果

魔鬼

分析
使用substring（start, end）方法截取字符串的时候，表示从start开始（包括start），到end结束（不包括end），也就是集合[start,end）。一定要注意，截取的下标是从0开始的，也就是说0表示第1个字符，1表示第2个字符……n表示第（n+1）个字符。对于字符串的操作，凡是涉及下标的，都是从0开始。

五、截取数组某部分——slice（）

在JavaScript中，我们可以使用slice（　）方法来获取数组的某一部分。slice，就是“切片”的意思。

语法
数组名.slice（start,end）;
说明
start表示开始位置，end表示结束位置。start和end都是整数，都是从0开始，其中end大于start。

slice（start,end）的截取范围为[start,end），也就是“包含start但不包含end”。其中，end可以省略。当end省略时，获取的范围为“start到结尾”。slice（　）方法跟上一章学的substring（　）方法非常相似，我们可以通过对比更好地理解并使用。

举例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
     var arr=["HTML","CSS","JavaScript","jQuery","Vue.js"];
     document.write（arr.slice（1,3））;
</script>
</head>
<body>
</body>
</html>

浏览器预览效果
在这里插入图片描述
分析
slice.（start,end）的截取范围为[start,end）。大家一定要注意，截取的下标是从0开始的，这个和数组下标从0开始是一样的道理。在这个例子中，我们把arr.slice（1, 3）换成arr.slice（1），此时，浏览器预览效果
在这里插入图片描述

六、获取某一个字符——charAt（）

在JavaScript中，我们可以使用charAt（　）方法来获取字符串中的某一个字符。

语法

字符串名.charAt（n）

说明
n是整数，表示字符串中的第（n+1）个字符。注意，字符串第1个字符的下标是0，第2个字符的下标是1,……，第n个字符的下标是（n-1），以此类推。

举例：获取某一个字符

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
  <title></title>
  <script>
        var str="Hello lily!";
        document.write（"第1个字符是："+str.charAt（0）+"<br/>"）;
        document.write（"第7个字符是："+str.charAt（6））;
  </script>
</head>
<body>
</body>
</html>

浏览器预览效果
在这里插入图片描述
分析
在字符串中，空格也是作为一个字符来处理的。对于这一点，我们在前面已经说过了。

举例：找出字符串中小于某个字符的所有字符

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var str="how are you doing?";
         //定义一个空字符串，用来保存字符
         var result="";
         for（var i=0; i < str.length; i++）
         {
             if（str.charAt（i）< "s"）
             {
                  result+=str.charAt（i）+",";
             }
         }
         document.write（result）;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果
在这里插入图片描述
分析在这里，我们先初始化了两个字符串：str和result。其中，result是一个空字符串，用于保存结果。然后我们在for循环中遍历str，并且使用charAt（　）方法获取当前的字符，再与“s”进行比较。最后，如果当前字符小于“s”则将当前字符保存到result中去。

两个字符之间比较的是ASCII码的大小。空格在字符串中也是被当成一个字符来处理的。

实战题：统计某一个字符的个数

找出字符串“Can you can a can as a Canner can can a can”中字符c的个数，不区分大小写。

实现代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var str="Can you can a can as a Canner can can a can";
         var n=0;
         for（var i=0;i<str.length;i++）
         {
             var char=str.charAt（i）;
             //将每一个字符转换为小写，然后判断是否与"c"相等
             if（char.toLowerCase（　）=="c"）{
                  n+=1;
             }
         }
         document.write（"字符串中含有"+n+"个字母c"）;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果
在这里插入图片描述
统计字符串中有多少个数字

如果给大家一个任意的字符串，如何统计出里面有多少个数字？

实现方法很简单，可以使用for循环结合charAt（　）方法来获取字符串中的每一个字符，然后判断该字符是否是数字就可以了。

实现代码如下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         function getNum（str）{
             var num=0;
             for（var i=0; i < str.length; i++）{
                  var char=str.charAt（i）;
                  //isNaN（　）对空格字符会转化为0，需要加个判断charAt（i）不能为空格
                  if（char !=" " && !isNaN（char））{
                       num++;
                  }
             }
             return num;
         }
         document.write（getNum（"1d3sdsg"））;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果
在这里插入图片描述
分析
在JavaScript中，我们可以使用isNaN（　）函数来判断一个值是否为NaN值。

NaN，意为Not a Numer（非数字）。如果该值不是数字，会返回true；如果该值是数字，会返回false。

请注意，这里用的是！isNaN（　），而不是isNaN（　）。isNaN（　）函数是一个内置函数，用得不多，简单了解一下即可。

七、添加数组元素—unshift（）、push（）

1、在数组开头添加元素：unshift（　）

在JavaScript中，我们可以使用unshift（　）方法在数组开头添加新元素，并且可以得到一个新的数组（意思是原数组变了）。

语法
数组名.unshift（新元素1，新元素2,……，新元素n）

说明
“新元素1, 新元素2, ……, 新元素n”表示在数组开头添加的新元素。

举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var arr=["JavaScript","jQuery"];
         arr.unshift（"HTML","CSS"）;
         document.write（arr）;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果
在这里插入图片描述
分析
从这个例子中，可以直观地看出来，使用unshift（　）方法为数组添加新元素后，该数组已经改变了。此时，arr[0]不再是"JavaScript"，而是"HTML";arr[1]也不再是"jQuery"，而是"CSS"。arr.length由2变为了4。当然我们可以验证一下，请看下面的例子。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var arr=["JavaScript","jQuery"];
         document.write（"添加前：<br/>arr[0]:"+arr[0]+"<br/>arr[1]:"+arr[1]+"<br/>"）;
         arr.unshift（"HTML","CSS"）;
         document.write（"添加后：<br/>arr[0]:"+arr[0]+"<br/>arr[1]:"+arr[1]）;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果
在这里插入图片描述

2、在数组结尾添加元素：push（　）

在JavaScript中，我们可以使用push（　）方法在数组结尾添加新元素，并且可以得到一个新的数组（也就是原数组变了）。

语法
数组名.push（新元素1，新元素2,……，新元素n）

说明
“新元素1, 新元素2, ……, 新元素n”表示在数组结尾添加的新元素。

举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var arr=["HTML","CSS"];
         arr.push（"JavaScript","jQuery"）;
         document.write（arr）;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果
在这里插入图片描述
分析
从这个例子中，也可以直观地看出来，使用push（　）方法为数组添加新元素后，该数组也已经改变了。此时arr[2]不再是“undefined”（未定义值），而是"JavaScript";arr[3]也不再是“undefined”，而是"jQuery"。当然我们也可以验证一下，请看下面的例子。

举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var arr=["HTML","CSS"];
         document.write（"添加前：<br/>arr[2]:"+arr[2]+"<br/>arr[3]:"+arr[3]+"<br/>"）;
         arr.push（"JavaScript","jQuery"）;
         document.write（"添加后：<br/>arr[2]:"+arr[2]+"<br/>arr[3]:"+arr[3]）;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果如图

分析
有人可能会问，在上面这个例子中，我们也可以使用arr[2]="JavaScript"以及arr[3]="jQuery"在数组结尾添加新的元素，这是不是意味着push（　）这个方法并没有存在的意义呢？

其实不是这样的。如果我们不知道数组有多少个元素，就没法用下标的方式来给数组添加新元素。使用push（　）方法不需要知道数组有多少个元素，直接可以在数组的最后面添加新元素。

push（　）方法在实际开发中，特别是面向对象开发的时候用得非常多，可以认为是数组中最常用的一个方法，大家要重点掌握。

八、删除数组元素

1、删除数组中第一个元素：shift（　）

在JavaScript中，我们可以使用shift（　）方法来删除数组中的第一个元素，并且可以得到一个新的数组（也就是原数组变了）。

语法
数组名.shift（　）

说明
unshift（　）方法用于在数组开头添加新元素，shift（　）方法用于删除数组开头的第一个元素，两者可看成是功能相反的操作。

举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var arr=["HTML","CSS","JavaScript","jQuery"];
         arr.shift（　）;
           document.write（arr）;
     </script>
  </head>
  <body>
  </body>
  </html>

浏览器预览效果
在这里插入图片描述
分析
从上面的例子可以看出，使用shift（　）方法删除数组的第一个元素后，原数组就变了。此时arr[0]不再是"HTML"，而是"CSS";arr[1]不再是"CSS"，而是"JavaScript"，以此类推。

2、删除数组最后一个元素：pop（　）

在JavaScript中，我们可以使用pop（　）方法来删除数组的最后一个元素，并且可以得到一个新数组（也就是原数组变了）。

语法
数组名.pop（　）

说明
push（　）方法用于在数组结尾处添加新的元素，pop（　）方法用于删除数组的最后一个元素，两者也可看成是功能相反的操作。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var arr=["HTML","CSS","JavaScript","jQuery"];
         arr.pop（　）;
         document.write（arr）;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果
在这里插入图片描述
分析
从上面的例子可以看出，使用pop（　）方法删除数组的最后一个元素后，原数组也变了。此时arr[3]不再是"jQuery"，而是“undefined”。对于这个，我们可以自行测试一下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var arr=["HTML","CSS","JavaScript","jQuery"];
         arr.pop（　）;
         arr.pop（　）;
         document.write（arr.length）;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果
在这里插入图片描述
分析
实际上，unshift（　）、push（　）、shift（　）、pop（　）这4个方法都会改变数组的结构，因此数组的长度（length属性）也会改变。

九、比较数组大小——sort（）

在JavaScript中，我们可以使用sort（　）方法来对数组中的所有元素进行大小比较，然后按从大到小或者从小到大的顺序进行排序。

语法
数组名.sort（函数名）

说明
“函数名”是定义数组元素排序的函数的名称。

举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         //定义一个升序函数
         function up（a,b）
         {
             return a-b;
         }
         //定义一个降序函数
         function down（a,b）
         {
             return b-a;
         }
         //定义数组
         var arr=[3,9,1,12,50,21];
         arr.sort（up）;
         document.write（"升序："+arr.join（"、"）+"<br/>"）;
         arr.sort（down）;
         document.write（"降序："+arr.join（"、"））;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果
在这里插入图片描述
分析
arr.sort（up）表示将函数up作为sort（　）方法的参数。有的小伙伴可能会问：“什么？函数也可以作为参数？”说得一点没错。此外，好多初学的小伙伴还会有其他的各种疑问，如“为什么升序函数和降序函数要这样定义？”“为什么把一个函数传到sort（　）方法内就可以实现自动排序了？”

等学到后面再翻回来看就会恍然大悟了。

十、颠倒数组顺序——reverse（）

在JavaScript中，我们可以使用reverse（　）方法来实现数组中所有元素的反向排列，也就是颠倒数组元素的顺序。reverse，就是“反向”的意思。

语法
数组名.reverse（　）;

举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var arr=[3,1,2,5,4];
         arr.reverse（　）;
         document.write（"反向排列后的数组："+arr）;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果
在这里插入图片描述

十一、将数组元素连接成字符串——join（）

在JavaScript中，我们可以使用join（　）方法将数组中的所有元素连接成一个字符串。

语法
数组名.join（“连接符”）;

说明
连接符是可选参数，是连接元素之间的符号。默认情况下，一般会采用英文逗号（,）作为连接符。

举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var arr=["HTML","CSS","JavaScript","jQuery"];
         document.write（arr.join（　）+"<br/>"）;
         document.write（arr.join（"*"））;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果
在这里插入图片描述
分析
**arr.join（　）表示使用默认符号（,）作为分隔符，**arr.join（" * "）表示使用星号（ * ）作为分隔符。如果我们想要实现字符之间没有任何东西，该怎么做呢？请看下面的例子。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         var arr=["HTML","CSS","JavaScript","jQuery"];
         document.write（arr.join（""）+"<br/>"）;
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果
在这里插入图片描述
分析
注意，join（" “）和join（”"）是不一样的！前者两个引号之间有空格，表示用空格作为连接符，而后者两个引号之间是没有空格的。

举例

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
        <title></title>
        <script>
             var str1="我*爱*学*前*端";
             var str2=str1.split（"*"）.join（"#"）;
             document.write（str2）;
        </script>
    </head>
    <body>
    </body>
    </html>

运行结果

我#爱#学#前#端

分析
在这个例子中，我们要实现的效果是将“我爱学前端”转换成“我#爱#学#前#端”。

对于str1.split（“*”）.join（“#”）这句代码，我们分两步来理解。

str1.split（" * "）表示以星号（ * ）作为分割符来分割字符串str1，从而得到一个数组，即[“我”,“爱”,“学”,“前”,“端”]。由于这是一个数组，所以此时我们可以使用数组的join（）方法。

实际上，var str2 = str1.split（" * “）.join（”#"）；可以分两步来写，它等价于下面的代码。

var arr=str1.split（"*"）;
var str2=arr.join（"#"）;

实战题：数组与字符串的转换操作
给大家提供一个字符串，然后需要大家实现每一个字符都用尖括号括起来的效果。例如，给你一个字符串“我爱学前端”，最终要实现的效果是“<我><爱><学><前><端>”。

实现代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
<script>
     var str1="我爱学前端";
     var str2=str1.split（""）.join（"><"）;
     var arr=str2.split（""）;
     arr.unshift（"<"）;
     arr.push（">"）;
     var result=arr.join（""）;
     document.write（result）;
</script>
</head>
<body>
</body>
</html>

运行结果

<我><爱><学><前><端>

分析
“var str2 = str1.split（“”）.join（“><”）;”表示在str1所有字符的中间插入大于号和小于号（><），因此str2为“<我><爱><学><前><端>”。

“var arr = str2.split（“”）;”表示将str2转换为数组，str2中的每一个字符都是数组的一个元素。只有将str2转换为数组，我们才可以使用数组的unshift（　）方法和push（　）方法。

李桥桉

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JavaScript】内置对象split、indexOf、replace、substring、charAt、slice、push、pop

str.split（" “）的两个引号之间是有一个空格的。str.split（” “）（有空格）是带有1个字符的字符串。str.split（”"）（无空格）是带有0个字符的字符串，也叫空字符串。注意，split（" “）和split（”"）是不一样的。实际上，split（　）方法有两个参数：第1个参数表示分割符，第2个参数表示获取“分割之后的前n个元素”。str.split（" "）表示用空格来分割字符串。最后，数组join（　）方法一般都是配合字符串的split（　）方法来使用的。
复制链接

扫一扫