目录

一、字符串遍历

    var a="abcdefg";
    console.log(a.length);//7

    for(var i=0;i< a.length;i++){
        console.log(i);//0 1 2 3 4 5 6
    }

    for(var key in a){
        console.log(key);//0 1 2 3 4 5 6
    }

    for(var i=0;i< a.length;i++){
        //根据字符串类对象所使用的方法来获取每一个
        console.log(a[i]);//a b c d e f g
    }
  • charAt—根据索引获取字符串里面的每个字符
   for(var i=0;i< a.length;i++){
        console.log(a.charAt(i));//a b c d e f g
    }

二、字符串查找的方法

（1）indexOf()和lastIndexOf()

  • indexOf()：返回字符串中检索指定字符第一次出现的位置，没找到就返回-1
  • 从左到右
  • 参数1：查找的字符(必写)
  • 参数2：从哪个索引为开始(可选)
  • 返回值：找到返回当前索引，没找到返回-1
  • lastIndexOf()：返回字符串中检索指定字符最后一次出现的位置，没找到就返回-1。
  • 从右到左
  • lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，如果指定第二个参数 start，则在一个字符串中的指定位置从后向前搜索。
  • 注意： 该方法将从后向前检索字符串，但返回是从起始位置 (0) 开始计算子字符串最后出现的位置。 看它是否含有字符串。
  • 开始检索的位置在字符串的 start 处或字符串的结尾（没有指定 start 时）。
  • 如果没有找到匹配字符串则返回 -1 。
  • 若是只有一个参数，找到之后返回索引位置，没找到返回-1。
<script>
   var str = "abcdef";
   //输出所有字符
   for(var i = 0;i<str.length;i++)
   {
       console.log(str[i]);//a b c d e f
   }
   console.log(str.indexOf('c'));//2
   console.log(str.lastIndexOf('a'));//0
</script>
  • 若是有两个参数，参数1为要找的字符，参数2为从哪个字符开始找，找到之后返回索引位置，没找到返回-1。
<script>
   var str = "abcdef";
   console.log(str.indexOf("a", 1));//-1
   console.log(str.lastIndexOf('b', 4));//1
</script>

（2）search()查找

  • 主要检索与正则表达式相匹配的值
  • 一个参数，找到返回索引，没找到返回-1
	console.log(str.search('m')); //-1

三、元素替换方法----replace()方法

  • 但是replace()方法只能替换字符串中的第一个出现的字符，若是要把一个字符串里面所有相同字符全部替换，需要使用正则表达式进行匹配。
  • 替换指定字符对原字符串无影响
<script>
   var str = "abcdefa";
   console.log(str.replace("a", "aaaa"));//aaaabcdefa默认只替换找到的第一个字符
   console.log(str);
   console.log(str.replace(/a/ig, "aaaa"));//aaaabcdefaaaa
</script>

四、字符串去空-----trim()方法

  • 移除字符串首尾空白，若是字符串中间的空格也要全部去除，需要运用replace()方法使用正则表达式进行去除，不能使用trim()方法。
<script>
   var str = "  abcde fg h ";
   console.log(str.length);//13
   console.log(str.trim().length);//10
   console.log(str.length);//13
   console.log(str.replace(/\s/g, ''));//abcdefgh
</script>

五、字符串拼接方法

（1）使用+号来进行字符串拼接

（2）concat()方法

  • 连接两个或多个字符串，返回连接后的字符串
<script>
   var str = "abcde";
   var s1 = "apple";
   var s2 = "book";
   console.log(str.concat(s1));//abcdeapple
   console.log(str.concat(s1, s2));//abcdeapplebook
   console.log(str.concat(s1).concat(s2));//abcdeapplebook
</script>

六、字符与ASCII值的相互转化

（1）根据索引返回字符—charAt()

<script>
	var str = "abcde";
   console.log(str.charAt(0));//a
</script>

（2）根据索引返回字符的ASCII值—charCodeAt()

<script>
	var str = "abcde";
   console.log(str.charCodeAt(0));//97
</script>

（3）根据索引获取对应的字符，转ASCII值—codePointAt()

    var str="abcde";
    console.log(str.codePointAt(0));//97--根据索引获取对应的字符，转ASCII值

（4）将ASCII值转化为字符------fromCharCode()方法

  • 这个方法来自于String类对象
<script>
	console.log(String.fromCharCode(97));//a
</script>

七、字符串截取方法

（1）substr()方法--------从起始索引号提取字符串中指定数目的字符

  • 就是从那开始截，截几个，参数为索引和length
  • 返回值是截取的字符串。
  • 截取完成之后对原字符串无影响。
<script>
	var str = "abcdef";
   console.log(str.substr(0, 5));//abcde
   console.log(str.substr(4));//ef--写一个参数为索引，默认截取字符串该索引后面的所有字符
</script>

在这里插入图片描述

（2）substring()方法----提取字符串中两个指定的索引号之间的字符

  • 取小不取大
  • 就是从哪开始截取到哪结束，两个参数都为索引
  • 返回值是截取的字符串
  • 截取完成之后对原字符串无影响
<script>
	var str = "abcdef";
   console.log(str.substring(0, 3));//abc
   console.log(str.substring(3));//def--一个参数，从当前为索引开始直接截取完。
</script>

（3）slice()方法----------提取字符串的片断，并在新的字符串中返回被提取的部分

  • 就是从哪开始截取到哪结束，两个参数都为索引，但不包括第二个索引所对应的元素
<script>
   var str = "abcdef";
   console.log(str.slice(0, 4));//abcd
   console.log(str.slice(3));//def--等价于substring
</script>

八、字符串转化为数组----split()方法

  • 把字符串分割为子字符串数组
  • 参数1：参数是以什么符号分割
  • 参数2：返回的数组最大长度，没有设置默认全部分割。
<script>
   var s3 = "abcdefg";//转换为['a','b','c','d','e','f','g']
   console.log(s3.split(''));
   var s4 = "a,b,cd,e,fg";
   console.log(s3.split(','));
</script>

在这里插入图片描述

九、字符串正则使用方法------match()方法

  • 找到一个或多个正则表达式的匹配，返回值是null或者数组值
<script>
   var tel = '15929477055';
   console.log(tel.match(/^1[345789]\d{9}$/));
</script>

在这里插入图片描述

十、大小写转换

（1）toLocaleLowerCase() --转化为本地格式的小写

（2）toLocaleUpperCase() --转化为本地格式的大写

（3）toLowerCase()-----------把字符串转换为小写

（4）toUpperCase()-----------把字符串转换为大写

<script>
   var str = "abc";
   console.log(str.toLowerCase());//abc
   console.log(str.toUpperCase());//ABC
   console.log(str.toLocaleLowerCase());//abc
   console.log(str.toLocaleUpperCase());//ABC
</script>

十一、值类型转引用类型------toString()方法

  • 也就是返回字符串对象值
<script>
   var a = 10;
   console.log(a.toString());//10
   console.log(typeof a.toString());//string
</script>

十二、数字精确小数点的方法------toFixed()方法

<script>
   var num = 99;
   console.log(num.toFixed(2));//99.00--保留2位小数点
</script>

十三、用本地特定的顺序来比较两个字符串----localeCompare()方法

  • f1.localeCompare(f2)
  • 如果 f1小于 f2，则 localeCompare() 返回-1。如果 f1大于
    f2，则该方法返回1。如果两个字符串相等，或根据本地排序规则没有区别，该方法返回 0。
<script>
	var f1 = 'a';
   var f2 = 'b';
   var f3 = "book";
   var f4 = "apple";
   var f5 = "aaa";
   var f6 = "aaa";
   console.log(f1.localeCompare(f2));//-1
   console.log(f3.localeCompare(f4));//1
   console.log(f5.localeCompare(f6));//0
</script>

十四、返回某个字符串对象的原始值----valueOf()方法

<script>
   var k1 = "apple";
   console.log(k1.valueOf());
   var k2 = new String("book");
   console.log(k2);//String的一个对象
   console.log(k2.valueOf());
   console.log(k2.toString());//也是返回对象的原始值
</script>

在这里插入图片描述

  • 区别：
  • 数据类型的区别
<script>
	var k1 = "apple";
   var k2 = new String("book");
   console.log(typeof k1);//string
   console.log(typeof k2);//object
</script>
  • 直接定义的字符串，valueOf的值还是自身；通过String类对象声明的字符串，valueOf指向原始值。

十五、其他方法

（1）bold()方法------返回加了 标签的字符串

（2）big()方法--------用于把字符串显示为大号字体。

（3）blink()方法------用于显示闪动的字符串。

# 正则表达式 # css # html
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign