本文链接: 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. Fiddler应用——Fiddler过滤功能

    Fiddler的过滤功能在Fiddler右面板处,点击Filters显示如图所示面板. 如图所示,Fiddler的过滤面板主要分为几个部分: 1.Use Filters:是否启用过滤器 2.Actio ...

  2. 进一步使用 模板缓冲（stencil）

    最近做课题的时候需要计算一个 view(就是一次渲染得到的帧) 下的重叠像素个数(两个物体或更多的物体重叠). 最开始我的想法是渲染一个物体输出一张纹理,这样对比物体之间的纹理就知道重叠了.但是这样当 ...

  3. day95_11_28，selenium定位元素，cookies获取

    一.selenium selenium可以将一些资源定位: # 1.find_element_by_id 根据id找 # 2.find_element_by_link_text 根据链接名字找到控件( ...

  4. Django中的跨域请求问题

    本文目录 一 同源策略 二 CORS(跨域资源共享)简介 三 CORS基本流程 四 CORS两种请求详解 五 Django项目中支持CORS 回到目录 一 同源策略 同源策略(Same origin ...

  5. 【OCR系列之一】字符识别技术总览

    最近入坑研究OCR,看了比较多关于OCR的资料,对OCR的前世今生也有了一个比较清晰的了解.所以想写一篇关于OCR技术的综述,对OCR相关的知识点都好好总结一遍,以加深个人理解. 什么是OCR? OC ...

  6. 成为杰出Java开发人员的10个步骤

    在优锐课的学习分享中,讨论了如果你是Java开发人员并且对技术充满热情,则可以按照以下十个步骤进行操作,这可以使你成为杰出的Java开发人员. 1.具有扎实的基础和对OO原理的理解 对于Java开发人 ...

  7. Loj #6503. 「雅礼集训 2018 Day4」Magic

    Loj #6503. 「雅礼集训 2018 Day4」Magic 题目描述 前进!前进!不择手段地前进!--托马斯 · 维德 魔法纪元元年. 1453 年 5 月 3 日 16 时,高维碎片接触地球. ...

  8. Linux 部署vue项目(使用nginx)

    1.部署Nginx 请参考Linux下部署nginx,此处不再重复 2.Vue项目打包 # 打包正式环境 npm run build:prod # 打包预发布环境 npm run build:stag ...

  9. 《细说PHP》 第四版 样章 第二章 PHP的应用与发展 3

    2.3  PHP的开发优势 每种编程语言都有针对的领域,当然相同领域也有多个编程语言可以选择, 所以需要了解每种编程语言的优势和劣势,才能更好地去选择使用,在对的开发领域充分发挥它的优势,编写出最优质 ...

  10. 【zibbix自定义监控】zabbix服务自定义监控mysql的状态信息

    由于mysql我安装在zabbix_server服务的主机上,所以下面操作在zabbix服务主机上进行,注意服务主机已经安装了监控服务 实现步骤: 1.修改 zabbix_agentd.conf,添加 ...