js字符串操作总结(必看篇)

2024-11-26 02:00:04

字符方法

<!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字符串操作总结(必看篇)全部内容了，希望大家多多支持我们~

js字符串操作方法实例分析

本文实例讲述了js字符串操作方法.分享给大家供大家参考.具体如下: var str="This is my first Script code."; document.write("原字符串为:"+str+"<br>") document.write("第五个字符之后的部分:"+str.slice(5,-1)+"<br>"); document.write("第五个字符之后
js String对象中常用方法小结(字符串操作)

1.charCodeAt方法返回一个整数,代表指定位置字符的Unicode编码. strObj.charCodeAt(index) 说明: index将被处理字符的从零开始计数的编号.有效值为0到字符串长度减1的数字. 如果指定位置没有字符,将返回NaN. 例如: var str = "ABC"; str.charCodeAt(0); 结果:65 2.fromCharCode方法从一些Unicode字符串中返回一个字符串. String.fromCharCode([code1[,cod
JavaScript中的字符串操作详解

一.概述字符串在JavaScript中几乎无处不在,在你处理用户的输入数据的时候,在读取或设置DOM对象的属性时,在操作cookie时,当然还有更多....JavaScript的核心部分提供了一组属性和方法用于通用的字符串操作,如分割字符串,改变字符串的大小写,操作子字符串等. 当前的大部分浏览器也能从强大的正则表达式获益,因为它极大地简化了大量的字符串操作任务,不过它也需要你克服一条有些陡峭的学习曲线.在这里,主要是介绍字符串本身的一些操作,正则表达式会在以后的随笔中涉及. 二
JavaScript中操作字符串小结

最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信你也跟我一样,发现字符串的处理是前端招聘过程中最常见的题型之一. 这些题有一个特点,站在考官的角度去考虑,它考的不是你会不会,而是你能不能在不借用XX手册或者XX指南再或者百度谷歌的情况下,用比较简洁的方式写出答案来. 可惜的是,很多开发人员,当然我也是其中一员,对于很多经常用到的字符串处理函数却不能牢牢记住他们的用法,总不得不去求助于XX手册或者
JavaScript中常见的字符串操作函数及用法汇总

本文实例总结了JavaScript中常见的字符串操作函数及用法.分享给大家供大家参考.具体分析如下: 最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信你也跟我一样,发现字符串的处理是前端招聘过程中最常见的题型之一.这些题有一个特点,站在考官的角度去考虑,它考的不是你会不会,而是你能不能在不借用XX手册或者XX指南再或者百度谷歌的情况下,用比较简洁的方式写出答案来.可惜的是,很多开发人员,当然我也
js字符串操作总结(必看篇)

字符方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>字符方法</title> </head> <body> <script type="text/javascript"> /* charAt方法和charCodeAt方法都接收一个参数,基于0的
java基础之数组常用操作总结(必看篇)

常用的对数组进行的操作 1.求数组中最大值,最小值思路:假设下标为0的元素是最大值,遍历数组,依次跟max进行比较,如果有元素比这个max还大,则把这个值赋给max.最小值同样 public class TestArray{ public static void main(String[] args){ int[] arr={23,45,234,576,34,87,34,12,67}; int max=arr[0]; int min=arr[0]; for(int i=0;i<arr.leng
js数组操作方法总结(必看篇)

判断数值数组中各个数字出现的奇偶次数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>数组操作</title> </head> <body> <script type="text/javascript"> var arr=[3,1,2,2,1,3,1
js学习阶段总结(必看篇)

typeof操作符:返回字符串,可能是"undefined","boolean"," string","number","object","function"中的一种,所以不能判断数组. NaN(Not a Number):用法NaN(val)如果val能被转化成一个数就返回false,否则返回true. parseInt(val,way)其中way可以是2,4...就是要按照这个进制来
JS基础随笔(菜鸟必看篇)

在学习的过程中总会一次次的冒出以前囫囵吞枣的地方,下面将今天学到的一下知识点记录下来方便以后查看. JavaScript中的数据类型简单(基本)数据类型:Number.String.Boolean.Undefined.Null 复杂(引用)数据类型: Object.Array.Date.function等下面介绍一下简单(基本)数据类型和复杂(引用)数据类型的区别: 简单数据类型:在栈内直接存储值,如下图所示复杂数据类型:在栈内存储引用,如下图在了解以上两种数据类型的存储方式之后可以区分
详谈PHP基础与JS操作的区别(必看篇)

嵌入页面方式 JS嵌入方式:<script></script> PHP嵌入方式:<?php ?>(常用) 输出语法 Javascript输出 1.alert("警告的内容") 2.prompt("提示的内容") 3.document.write()(页面输出内容) PHP输出 1.echo(常用)//可同时输出多个字符串 eg:echo $a,"hello"; 2.print //只能输出一个字符串 eg:pr
js正则表达式学习和总结(必看篇)

最近在做一个小项目时用到了正则匹配,感觉正则挺好用的,所以打算抽时间来小小总结一下. 正则表达式是一种文本模式,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符").模式描述在搜索文本时要匹配的一个或多个字符串.RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具.正则表达式是一种查找以及字符串替换操作. 新建正则表达式方式一:直接量语法 var reg = /pattern/attributes 方式二:创建 RegExp 对象的语法 var r
微信JS SDK接入的几点注意事项(必看篇)

微信JS SDK接入,主要可以先参考官网说明文档,总结起来有几个步骤: 1.绑定域名: 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 备注:登录后可在"开发者中心"查看对应的接口权限. 2.引入JS文件:在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js, 备注:支持使用 AMD/CMD 标准
JavaScript中数组的各种操作的总结(必看篇)

js数组的新建,头插入,尾插入,头删除,尾删除,中间删除,删除多个,多个数组合并,数组倒序,数组截取等等,都有对应的例子. 声明一个数组原来是如下声明: var s = new Array(); 但是现在编辑器推荐使用如下声明:简洁 var s = []; concat 方法返回一个新数组,这个新数组是由两个或更多数组组合而成的.不修改原数组. join 方法返回字符串值,其中包含了连接到一起的数组的所有元素,元素由指定的分隔符分隔开来.不修改原数组. pop 方法移除数组中的最后一个
老生常谈Java字符串进阶(必看篇)

前言最常用的对字符串操作的类有三个,分别是String,StringBuilder,StringBuffer,下面将会详细的说说这三个类...... String String类代表字符串,这个是最基本的对字符串的类,这个也是使用比较多的类,这里就不再详细介绍了构造 new String(String str) new String(StringBuilder str) new String(StringBuffer str) new String(byte[] bys,String cha

js字符串操作总结(必看篇)

相关推荐

随机推荐