本文链接: https://www.jb51.net/article/97915.htm

字符方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>字符方法</title>
  </head>
  <body>
  <script type="text/javascript">
  /*
  charAt方法和charCodeAt方法都接收一个参数，基于0的字符位置
  charAt方法是以单字符字符串的形式返回给定位置的那个字符
  charCodeAt方法获取到的不是字符而是字符编码
   */
    var str="hello world";
    console.log(str.charAt(1));//e
    console.log(str.charCodeAt(1));//101
    //还可以使用方括号加数字索引来访问字符串中特定的字符
    console.log(str[1]);//e
  </script>
  </body>
</html>
 
字符串操作方法
concat方法
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>concat方法</title>
  </head>
  <body>
  <script type="text/javascript">
    var str="hello ";
    var res=str.concat("world");
    console.log(res);//hello world
    console.log(str);//hello  这说明原来字符串的值没有改变
    var res1=str.concat("nihao","!");
    console.log(res1);//hello nihao!  说明concat方法可以接收任意多个参数
    //虽然concat方法是专门用来拼接字符串的，但是实践中我们使用最多的还是加操作符+，因为其简易便行
  </script>
  </body>
</html>
 
slice方法、substring方法、substr方法
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>字符串操作方法</title>
  </head>
  <body>
  <script type="text/javascript">
    /*
    slice方法：第一个参数指定子字符串开始位置，第二个参数表示子字符串最后一个字符后面的位置
    substring方法：第一个参数指定子字符串开始位置，第二个参数表示子字符串最后一个字符后面的位置
    substr方法：第一个参数指定子字符串开始位置，第二个参数表示返回的字符个数
    这三个方法都会返回被操作字符串的一个子字符串，都接收一或两个参数
    如果没有给这些方法传递第二个参数，则将字符串的长度作为结束位置。这些方法也不会修改字符串本身，只是返回一个基本类型的字符串值
     */
    var str="hello world";
    console.log(str.slice(3));//lo world
    console.log(str.substring(3));//lo world
    console.log(str.substr(3));//lo world
    console.log(str.slice(3,7));//lo w  7表示子字符串最后一个字符后面的位置  简单理解就是包含头不包含尾
    console.log(str.substring(3,7));//lo w
    console.log(str.substr(3,7));//lo worl 7表示返回7个字符
  
    console.log(str.slice(3,-4));//lo w  -4+11=7表示子字符串最后一个字符后面的位置  简单理解就是包含头不包含尾
    console.log(str.substring(3,-4));//hel  会转换为console.log(str.substring(3,0));
    //此外由于这个方法会将较小数作为开始位置，较大数作为结束位置，所以相当于调用console.log(str.substring(0,3));
    console.log(str.substr(3,-4));//""空字符串
    console.log(str.substring(3,0));
  </script>
  </body>
</html>
 
字符串位置方法
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>字符串位置方法</title>
  </head>
  <body>
  <script type="text/javascript">
    /*
    indexOf方法和lastIndexOf方法都是从一个字符串中搜索给定的子字符串，然后返回子字符串的位置，如果没有找到，则返回-1
    indexOf方法是从字符串的开头向后搜索子字符串，lastIndexOf方法正好相反
    这两个方法都可以接收两个参数：要查找的子字符串和查找的位置
     */
    var str="hello world";
    console.log(str.indexOf("o"));//4
    console.log(str.lastIndexOf("o"));//7
    console.log(str.indexOf("o",6));//7
    console.log(str.lastIndexOf("o",6));//4
  </script>
  </body>
</html>
trim方法
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>trim方法</title>
  </head>
  <body>
  <script type="text/javascript">
    /*
    trim方法用来删除字符串前后的空格
     */
    var str="   hello world   ";
    console.log('('+str.trim()+')');//(hello world)
    console.log('('+str+')');//(   hello world   )
  </script>
  </body>
</html>
字符串大小写转换方法
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>大小写转换</title>
  </head>
  <body>
  <script type="text/javascript">
    var str="HELLO world";
    console.log(str.toLowerCase());//hello world
    console.log(str.toUpperCase());//HELLO WORLD
  </script>
  </body>
</html>
 
字符串模式匹配方法
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>字符串模式匹配</title>
  </head>
  <body>
  <script type="text/javascript">
  /*
  match方法：只接受一个参数，由字符串或RegExp对象指定的一个正则表达式
  search方法：只接受一个参数，由字符串或RegExp对象指定的一个正则表达式
  search方法返回字符串中第一个匹配项的索引，如果没有匹配项，返回-1
   */
  var str="cat,bat,sat,fat";
  var pattern=/.at/;
  var matches=str.match(pattern);
  console.log(matches.index);//0
  console.log(matches[0]);//cat
  console.log(pattern.lastIndex);//0
  //lastIndex表示开始搜索下一个匹配项的字符位置，从0算起
  var pos=str.search(/at/);
  console.log(pos);//1 1表示at字符串在原来字符串中第一次出现的位置
  </script>
  </body>
</html>
replace方法
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>replace方法</title>
  </head>
  <body>
  <script type="text/javascript">
    var str="cat,bat,sat,fat";
    var res=str.replace("at","one");//第一个参数是字符串，所以只会替换第一个子字符串
    console.log(res);//cone,bat,sat,fat
  
    var res1=str.replace(/at/g,"one");//第一个参数是正则表达式，所以会替换所有的子字符串
    console.log(res1);//cone,bone,sone,fone
  </script>
  </body>
</html>
 
split方法
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>split方法</title>
  </head>
  <body>
  <script type="text/javascript">
  /*
  split方法是基于指定的字符，将字符串分割成字符串数组
  当指定的字符为空字符串时，将会分隔整个字符串
   */
    var str="red,blue,green,yellow";
    console.log(str.split(","));//["red", "blue", "green", "yellow"]
    console.log(str.split(",",2));//["red", "blue"]  第二个参数用来限制数组大小
    console.log(str.split(/[^\,]+/));// ["", ",", ",", ",", ""]
    //第一项和最后一项为空字符串是因为正则表达式指定的分隔符出现在了子字符串的开头，即"red"和"yellow"
    //[^...] 不在方括号内的任意字符  只要不是逗号都是分隔符
  </script>
  </body>
</html>
 
localeCompare方法
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>localeCompare方法</title>
  </head>
  <body>
  <script type="text/javascript">
    /*
    这个方法用于比较两个字符串
    1.如果字符串在字母表中应该排在字符串参数之前，则返回一个负数
    1.如果字符串等于字符串参数，则返回0
    1.如果字符串在字母表中应该排在字符串参数之后，则返回一个正数
     */
    var str="yellow";
    console.log(str.localeCompare("brick"));//1
    console.log(str.localeCompare("yellow"));//0
    console.log(str.localeCompare("zoo"));//-1
  </script>
  </body>
</html>
fromCharCode方法
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>fromCharCode方法</title>
  </head>
  <body>
  <script type="text/javascript">
    /*
    fromCharCode方法是接收一或多个字符编码，然后将其转换为字符串
    fromCharCode方法是String构造函数的一个静态方法
     */
    console.log(String.fromCharCode(104,101,108,108,111));//hello
  </script>
  </body>
</html>
找到匹配字符串所在的各个位置
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>字符串匹配</title>
  </head>
  <body>
  <script type="text/javascript">
  /*找到匹配字符串所在的各个位置*/
    var str="asadajhjkadaaasdasdasdasd";
    var position=[];
    var pos=str.indexOf("d");
    while(pos>-1){
      position.push(pos);
      pos=str.indexOf("d",pos+1);
    }
    console.log(position);//[3, 10, 15, 18, 21, 24]
  </script>
  </body>
</html>
字符串去重
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>字符串去重</title>
  </head>
  <body>
  <script type="text/javascript">
  //String.split() 执行的操作与 Array.join 执行的操作是相反的
  //split() 方法用于把一个字符串分割成字符串数组。
  //join方法用于将字符串数组连接成一个字符串
  //如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
    var str="aahhgggsssjjj";//这里字符串没有可以分隔的字符，所以需要使用空字符串作为分隔符
    function unique(msg){
      var res=[];
      var arr=msg.split("");
      //console.log(arr);
      for(var i=0;i<arr.length;i++){
        if(res.indexOf(arr[i])==-1){
          res.push(arr[i]);
        }
      }
      return res.join("");
    }
    console.log(unique(str));//ahgsj
  </script>
  </body>
</html>
判断字符串中字符出现的次数
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>字符串操作</title>
  </head>
  <body>
  <script type="text/javascript">
  /*
  1.先实现字符串去重
  2.然后对去重后的数组用for循环操作，分别与原始数组中各个值进行比较，如果相等则count++,循环结束将count保存在sum数组中，然后将count重置为0
  3.这样一来去重后的数组中的元素在原数组中出现的次数与sum数组中的元素是一一对应的
   */
    var str="aacccbbeeeddd";
    var sum=[];
    var res=[];
    var count=0;
    var arr=str.split("");
    for(var i=0;i<arr.length;i++){
      if(res.indexOf(arr[i])==-1){
        res.push(arr[i]);
      }
    }
    for(var i=0;i<res.length;i++){
      for(var j=0;j<arr.length;j++){
        if(arr[j]==res[i]){
          count++;
        }
      }
      sum.push(count);
      count=0;
    }
    console.log(res);//["a", "c", "b", "e", "d"]
    for(var i=0;i<res.length;i++){
      var str=(sum[i]%2==0)?"偶数":"奇数";
      console.log(res[i]+"出现了"+sum[i]+"次");
      console.log(res[i]+"出现了"+str+"次");
    }
  </script>
  </body>
</html>
阿里面试-字符串操作
<script type="text/javascript">
  var str = "www.taobao.com";
  var res = str.split("").reverse().join("").replace('oat','');
  console.log(res);//moc.oab.www
</script>

js字符串操作总结(必看篇)的更多相关文章

  1. 利用JS提交表单的几种方法和验证(必看篇)

    第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...

  2. 基于StringUtils工具类的常用方法介绍(必看篇)

    前言:工作中看到项目组里的大牛写代码大量的用到了StringUtils工具类来做字符串的操作,便学习整理了一下,方便查阅. isEmpty(String str) 是否为空,空格字符为false is ...

  3. 浅谈 js 字符串 trim 方法之正则篇

    原文:浅谈 js 字符串 trim 方法之正则篇 关于 trim 其实没啥好说的,无非就是去除首位空格,对于现代浏览器来说只是简单的正则 /^\s+|\s+$/ 就可以搞定了.而且支持中文空格   等 ...

  4. （转载）Android之有效防止按钮多次重复点击的方法(必看篇)

    为了防止测试妹子或者用户频繁点击某个按钮,导致程序在短时间内进行多次数据提交or数据处理,那到时候就比较坑了~ 那么如何有效避免这种情况的发生呢? 我的想法是,判断用户点击按钮间隔时间,如果间隔时间太 ...

  5. js 字符串操作函数有哪些

    js 字符串操作函数有哪些 一.总结 一句话总结:js字符串函数都是字符串对象的方法,是通过调用字符串方法的方式调用,和java,php里面不一样. 1.字符串替换函数怎么用? 这里的正则表示是加双引 ...

  6. js字符串操作

    javascript中字符串常用操作总结.JS字符串操作大全 String对象属性 (1) length属性 length算是字符串中非常常用的一个属性了,它的功能是获取字符串的长度.当然需要注意的是 ...

  7. 页面循环绑定（变量污染问题），js面向对象编程（对象属性增删改查），js字符串操作，js数组操作

    页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...

  8. 模块化 require.js 入门教学(前端必看系列)

    在工作的时候总是会用到模块化开发,那接下来我就顺着这个问题来说一下什么是模块化 前端模块化 !!! JS 模块化提供给我们三种规范 分别就是 No.1 commonjs  这个其实也就代表了node. ...

  9. js字符串操作总结

    字符方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf- ...

随机推荐

  1. Error creating bean with name 'sqlSessionFactory' defined in class path resource [config/spring/applicationContext.xml]: Invocation of init method failed;

    我报的错: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'sqlSes ...

  2. STL 中 list 的使用

    list 容器实现了双向链表的数据结构,数据元素是通过链表指针串连成逻辑意义上的线性表,这样,对链表的任一位置的元素进行插入.删除和查找都是极快速的.由于list对象的节点并不要求在一段连续的内存中, ...

  3. Druid-代码段-4-3

    所属文章:池化技术(一)Druid是如何管理数据库连接的? 本代码段对应流程4.2,防止内存泄漏的连接关闭检测: //回收长期未归还的连接(再次说明:该方法仅在removeAbandoned设置为tr ...

  4. JVM-3-JVM内存结构

    JVM内存结构可以大致可划分为线程私有区域和共享区域, 线程私有区域由虚拟机栈.本地方法栈.程序计数器组成,而共享区域由堆.元数据空间(方法区)组成.

  5. java8-13-默认方法 静态方法 重复注解 类型注解

    java8增加默认方法 静态方法   重复注解 类型注解   1.默认方法 default修饰   为什么要有这个特性? 当修改接口时候,需要修改全部实现该接口的类.为了解决这个问题,所以引进默认方法 ...

  6. mysql深入学习（一）

    Mysql高级学习 一.Mysql简介 1.概述 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一种关联数据库管理系统,将数据保存在不同 ...

  7. layUI学习第三日：layUI模块化开发

    layui 定义为「经典模块化」,具备早前 AMD 的影子,又并非受限于 CommonJS 的那些条条框框, BootStrap 的不同在于:layui 糅合了自身对经典模块化的理解. 除了 layu ...

  8. WPF 精修篇 自定义控件

    原文:WPF 精修篇 自定义控件 自定义控件 因为没有办法对界面可视化编辑 所以用来很少 现在实现的是 自定义控件的 自定义属性 和自定义方法 用VS 创建自定义控件后 会自动创建 Themes 文件 ...

  9. CentOS下yum方式安装FFmpeg

    FFmpeg一个完整的跨平台解决方案,用于记录,转换和流式传输音频和视频. 文档:https://www.ffmpeg.org/documentation.html FFmpeg安装 1.安装Nux ...

  10. celery定时器

    Celery 1.什么是Clelery Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统 专注于实时处理的异步任务队列 同时也支持任务调度 Celery架构 Celery的架构由三部分组 ...