金色小芝麻

vuePress-theme-reco 金色小芝麻    2021 - 2023
金色小芝麻 金色小芝麻

Choose mode

  • dark
  • auto
  • light
主页
分类
  • JavaScript
  • BUG复盘
  • SVG笔记
  • TypeScript
  • 个人总结
  • CSS笔记
  • 开发工具
  • 前端入门
  • Vue2.0
  • 性能优化
  • 架构学习
  • 每日一题
标签
时间轴
社交
  • 掘金 (opens new window)
author-avatar

金色小芝麻

83

文章

27

标签

主页
分类
  • JavaScript
  • BUG复盘
  • SVG笔记
  • TypeScript
  • 个人总结
  • CSS笔记
  • 开发工具
  • 前端入门
  • Vue2.0
  • 性能优化
  • 架构学习
  • 每日一题
标签
时间轴
社交
  • 掘金 (opens new window)
  • 前端入门

    • 博客搭建过程及相关配置
    • 数组中的16种常用方法
    • JS中的数据类型简析——基本数据类型值
    • JS中的数据类型object基础
    • JS中三种常见的判断
    • 数据类型之间的区别(堆内存Heap VS 栈内存Stack)
    • JS基础练习题及解析
    • 开关灯的小案例
    • JS中数据类型检测方法——typeof
    • 条件判断几个小练习
    • JS循环——for循环
    • 自定义属性实现选项卡小案例
    • 字符串中的12种常用方法
    • DOM操作的简单原理
    • JS实现隔行变色鼠标跟随小案例
    • JS中function的基础知识
    • JS中数组去重的三种方法
    • JS中时间格式化的三种方法
    • JS中URL参数处理的三种方法
    • JS小案例——获取随机验证码
    • DOM操作之——获取DOM标签的9种方式
    • DOM操作之——DOM节点类型及属性
    • DOM操作之——元素的增删改、样式修改、插入内容
    • JS中THIS相关问题梳理
    • JS中的变量提升机制
    • 在全局:私有上下文中:带VAR和不带VAR的区别
    • 作用域和作用域链查找机制
    • JS中堆栈内存的释放问题
    • JS中的闭包机制
    • ES3和ES6定义变量的区别
    • JS中的单例和工厂设计模式
    • JS中的面向对象OOP理论基础
    • 构造函数创建自定义类
    • JS中的原型和原型链
    • Math中常用的9种方法
    • 从一道阿里经典面试题剖析函数三种角色
    • 重写内置call
    • 重写一个内置new
    • 浏览器渲染页面的主体流程
    • 减少DOM的回流和重绘
    • JS中的多种继承方式
    • JS中数据类型检测四种方式的优缺点
    • JS中的正则表达式&&全面梳理
    • 非严格模式 🆚 严格模式的区别
    • 数组方法reduce、filter、flat
    • 获取数组中最大值/最小值的三种基础方法
    • 轮播图——渐隐渐显版
    • 深克隆 VS 浅克隆|深比较 VS 浅比较|回调函数
    • 轮播图——左右切换版
    • 事件及事件绑定、事件对象及事件传播
    • 从在地址栏输入网址到看到页面的过程&&AJAX基础
    • 想自学JS吗?想提升JS底层原理吗?76张脑图带你彻底搞懂原生JS
    • 面试手写API系列
    • 30张脑图带你从零开始学VUE
    • JS中的盒子模型
    • 初识JS-基础中的基础
    • 前端发展简史
    • JS中的三大类输出方式

字符串中的12种常用方法

vuePress-theme-reco 金色小芝麻    2021 - 2023

字符串中的12种常用方法

金色小芝麻 2020-02-19

定义:所有用单引号、双引号、反引号包起来的都是字符串

字符串的方法都不改变原字符串

字符串的方法都不改变原字符串而数组的方法有改变原数组的原因:
  • 字符串是基本类型值,每一个操作都是直接操作值,对原始字符串不会产生任何影响

  • 数组之所以会有改变原数组的情况,是因为他是对象类型,操作的堆内存,方法的执行很有可能把原始堆内存中的信息改变了;

(每一个字符串都是由零到多个字符组成的)

与数组相似
let str = '1111122222';
str.length//==>字符串长度
str[0]//==>获取索引为零(第一个)字符
str[str.length-1]//==>获取最后一个字符
str[10000]//==>undefined不存在这个索引

# 一、字符查找

# 1、charAt

  • 定义:获取字符串中指定索引对应的字符
  • @params:n:number类型,代表索引
  • @return:返回查找到的字符;找不到返回空字符串(不是undefined)

使用方法:str.charAt(索引)

var str="xuexi"
var res=str.charAt(0);//"x"
var res3=str[0];//"x"
var res2=str.charAt(100);//""
var res4=str[100];//undefined

相比较 str[索引] 的优点

  • charAt索引过大或过小时返回空字符串,str[索引]返回undefined

# 2、charCodeAt(作为了解)

  • 定义:获取字符串中指定索引对应的ASCII码值(unicode编码值)
  • @params:n:number类型,代表索引
  • @return:返回查找到的unicode编码值,找不到返回空字符串不是undefined

使用方法:str.charCodeAt(索引)

  • 基本不用(作为了解)
var str="zheli";
var res=str.charCodeAt(0);//122   对应的就是字母z(10进制值)
String.fromCharCode(122);//z 通过编码值找对应字符

# 二、字符串截取

# 3、substr

  • 定义:为了实现字符串的截取(在原来字符串中查找到自己想要的)
  • @params:n,m //选中从索引 n 开始,截取 m 个字符(m不写,截取到末尾)
  • @return:截取的字符串

使用方法:substr(n,m)

let str = 'haohaoxunxitiantianxiangshang'
str.substr(3,6);//==> 'haoxun'
str.substr(3);//==>'haoxunxitiantianxiangshang'截取到末尾
str.substr(3,10000);//==>'haoxunxitiantianxiangshang'截取到末尾(超过索引的也只截取到末尾)

# 4、substring

  • 定义:为了实现字符串的截取(在原来字符串中查找到自己想要的)
  • @params:n,m //选中从索引n开始(包含)到索引m(不包含)结束的字符
  • @return:截取的字符串

使用方法:str.substring(n,m)

let str = 'haohaoxunxitiantianxiangshang'
str.substring(3,6);//==> 'hao'
str.substring(3);//==>'haoxunxitiantianxiangshang'截取到末尾
str.substring(3,10000);//==>'haoxunxitiantianxiangshang'截取到末尾(超过索引的也只截取到末尾)

# 5、slice(支持负数)

  • 定义:为了实现字符串的截取(在原来字符串中查找到自己想要的)
  • @params:n,m //选中从索引n开始(包含)到索引m(不包含)结束的字符
  • @return:截取的字符串

使用方法:str.slice(n,m)

var str="xuexi"
var res=str.slice(0,3);//"xue"

var res1=str.slice();//完全复制
var res1=str.slice(0);//完全复制
  • 可以支持负数索引(其余两个方法不能是负数索引)
    • 负数索引的规律:用字符串的长度加上负数索引
var str="xuexi"

var res=str.slice(-3,-1);//"ex"
str.slice(2,4)//"ex"

substring与slice的区别:substring不支持负数索引

# 三、检测是否包含某项

# 6、indexOf

  • 定义:获取字符在字符串中首次出现的索引
  • @params:x,y //获取x第一次出现位置的索引,y是控制查找的起始位置索引
  • @return:索引值/-1(字符串中不包含此字符)

使用方法:indexOf(x,y)

  • 整体与数组中方法类似
  • 兼容所有版本浏览器
let str = 'haohaoxunxitiantianxiangshang'

str.indexOf('a');//==> 1
str.indexOf('@');//==>-1  不存在返回-1
str.indexOf('xunxi');//==>6  验证整体第一次出现的位置,返回的索引是第一个字符所在位置的索引
str.indexOf('xunt');//==>-1  不是整体返回-1
str.indexOf('a',7);//==> 13  查找字符串索引7及以后的字符串中,a第一次出现的位置索引

# 7、lastIndexOf

  • 定义:获取字符在字符串中最后一次出现的索引
  • 与indexOf用法相同

# 8、includes

  • 定义:检测当前字符串中是否包含某个字符
  • @params:字符
  • @return:布尔,true 包含,false 代表不包含

使用方法:includes(n);

  • 整体与数组中方法类似
if(!str.includes('@'))
    {
        ...
    } //用来判断条件是否成立

# 四、大小写转换

# 9、toUpperCase

  • 定义:转为大写
  • @params:无
  • @return:大写的字符

使用方法:str.toUpperCase()

str.substr(0,1).toUpperCase()+str.substr(1);//整体为小写的情况下只让第一个字母大写

# 10、toLowerCase

  • 定义:转为小写
  • @params:无
  • @return:小写的字符

使用方法:res.toLowerCase()

# 五、字符串转数组

# 11、split

  • 定义:把字符串按照指定的分隔符拆分成数组(和数组中的join对应)
  • @params:分隔符
  • @return:分隔后的数组

使用方法:str.split()

把'|'分隔符变为','分隔符

let str = 'music|movie|eat|sport';
let ary = str.split('|');//==>['music','movie','eat','sport']
//先利用split把字符串按|分割
res= ary.join(',');
//利用join在转换回字符串
console.log(res);//==>'music,movie,eat,sport'
//===============================================//
var str="2018 8 18"
var res=str.split(" ")//["2018","8","18"]

# 六、字符替换

# 12、replace

  • 定义:把指定的字符替换成别的字符
  • @params:老字符(也可以跟正则),新字符;//常用正则应用
  • @return:替换之后的字符串

使用方法:str.replace("@","哈")

在不使用正则的情况下,一次只能替换一个字符

正则:str.replace(/@/g,"哈");

var str="@feng@feng";
var res=str.replace("@","哈");//"哈feng@feng"
var res=str.replace(/@/g,"哈");//"哈feng哈feng

后续补充

  • match
  • localCompare
  • trim/trimLeft/trimRight
  • ......等

欢迎来到 金色小芝麻
看板娘