07 字符串

66 阅读4分钟

创建字符串

  • 创建字符串也分为两种方法 字面量 和 构造函数
  字面量:
        var str = 'hello'

        构造函数创建:
        var str = new String('hello')
  • 两种方式创建的字符串没有区别,除了在控制台打印显示区别外。
  • 字符串是由一串字符构成,每个字符对应自己的下标,和数组类似,从0开始

字符串操作

  • 字符串有length属性->表示字符串长度,也就是字符串中字符串个数
    注:空字符也算一个字符
  • 字符串是按照索引排列可以通过索引访问每一个字符字符值只能访问不能改变
  • 不能赋值 如: str[0] = 'k'
var str = 'helloworld'
 var str = 'hello world'
console.log(str[1])
str[1] = 'z'
console.log(str[1])
  • for循环遍历字符串

包装数据类型

  • 字符串、数值、布尔值是一个包装数据类型
  • 当使用点语句调用属性和方法时,会自动转换成复杂数据类型, 使用完自动转回基本数据类型
  • 使用点语句 .toString()

模板字符串

  • ES2015前,字符串拼接使用引号'', 但在换行操作和输出变量值时不方便
  • ES2015后, 字符串拼接使用反引号 `` ,引用变量时可以使用 ${变量名}
   var str = `<div><p></p><span></span><span></span></div>`
        var str2 = `
             <div>
               <p>你好</P>
                   <span>玛卡巴卡</span>
                   </div>
             `

字符串的常用方法

  • 我们操作字符串,也有一堆的方法来帮助我们操作
  • 字符串和数组有一个一样的地方,也是按照索引来排列的

charAt(索引) 是找到字符串中指定索引位置的内容返回

charAt(索引).png

indexOf & lastIndexOf

indexOf & lastIndexOf.png

  • 存在就返回字符在字符串中的下标
  • 如果不存在就返回-1

substring

substring.png

substr

substr.png

replace

  • 用于在字符串中用一些字符替换另一些字符
var str="Visit Microsoft!"
document.write(str.replace('Microsoft', "school"))
输出 => Visit school!

split

  • 分割字符串,将分割之后的字符存入数组返回
var str = 'javascript-html-css'
var arr = str.split('-')
arr =>  [javascript,html,css]

concat

  • 连接两个字符串,返回连接之后的字符串
var str = 'hello'
var s1 = str.concat('world')
 s1 => helloworld

trim()

       trim()
             => 方法删除字符串两端的空白符
             => 返回去掉空格的新字符

startsWith()&endsWith()

startsWith()&endsWith().png

toLowerCase 和 toUpperCase

toLowerCase 和 toUpperCase.png

严格模式(了解)

  • 我们都知道 js 是一个相对不很严谨的语言
  • 而且开发的时候,一些代码也不是很严格要求
  • 而严格模式就是对开发的时候写的一些内容做了要求

不严格的体现:

  1. 声明变量可以不使用var关键字
  2. 形参重复 ...

开启严格模式

  • "use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
  • 它不是一条语句,但是是一个字面量表达式,在 JavaScript 旧版本中会被忽略。
  • 严格模式可以应用到整个脚本程序或个别函数中
<script>
    'use strict'
    // 下面代码书写就要按照严格模式书写
</script>

function myFunction() {
   // 函数级别严格模式语法
   'use strict'
    y = 3.14;   // 报错 (y 未定义)
}

严格模式的规则

  • 声明变量必须有 var 关键字

严格模式1.png

声明变量时,没有var关键字,那么按照作用域规则会自动定义成全局变量

  • 函数的形参不可以重复

严格模式2.png

  • 声明式函数调用的时候函数内部没有 this

严格模式3.png

我们写代码时一定要按照严格模式书写

为什么使用严格模式

  • 消除代码运行的一些不安全之处,保证代码运行的安全;
  • 提高编译器效率,增加运行速度;
  • 为未来新版本的Javascript做好铺垫。

ASCII码

ASCII码 - as key

  • 计算机只能存储 0101010 这样的二进制数字
  • 那么我们的 a ~ z / A ~ Z / $ / @ /… 之类的内容也有由二进制数字组成的
  • 我们可以简单的理解为, a ~ z / A ~ Z / $ / @ /… 之类的内容都有一个自己的编号,然后在计算机存储的时候,是存储的这些编号, 我们看的时候,也是通过这些编号在解析成我们要看到的内容给我们看到
  • ASCII码表 - 128个

ASCII码表 - 128个.png

GBK

  • 汉字内码扩展规范
  • 共收录了21003个汉字
  • 中文简体编码

unicode 编码

  • 我们看到了,ASCII 只有这 128 个字符的编码结构
  • 但是因为 ASCII 出现的比较早,而且是美国发明的,早起时候这些内容就够用了
  • 因为存储一些英文的内容,传递一些英文的文章什么的都够用了
  • 那么对于这个世界来说肯定是不够用的
  • 因为我们的汉字没有办法存储,包括一些其他国家的语言也没有办法存储
  • 所以就出现了 unicode 编码,也叫(万国码,统一码)
  • unicode 对照表就是一个和 ASCII 一样的对照表,只不过变得很大很大,因为存储的内容特别的多
  • 而且包含了世界上大部分国家的文字,所以我们的文字和字符现在在存储的时候,都是按照 unicode 编码转换成数字进行存储
  • 我们的 UTF-8 就是一种 8 位的unicode字符集

charCodeAt方法

charCodeAt方法.png

  • 中文字符unicode编码大于255

简单对象Object补充

访问对象属性

  • 在JavaScript中,可以使用“ . ”和“ [ ] ”来访问对象的属性。
  • 二者区别:“ . ”表示法一般作为静态对象使用时来存取属性。 而“[ ]”表示法在动态存取属性时就非常有用。
var object = {name:'xiaoming',age:29};
var name1 = object.name;var name2 = object['name'];

for-in 遍历对象 for-of循环遍历数组、字符串

 for-in 遍历对象
            语法:
            for(var key in obj){
                //key属性
                //obj[key] 
            }
for-of 遍历数组、字符串、也可以遍map集合
for(var v of arr){
    //v数组元素
    //v字符
    //map元素
}  

for-in 遍历对象 for-of循环遍历数组、字符串1.png

for-in 遍历对象 for-of循环遍历数组、字符串2.png

区别

for..of与for..in的区别,以下说法都正确

  • A: for in可以遍历对象,for of不能遍历对象
  • B: for of可以用来遍历map集合,for in不能遍历map集合
  • C:for in遍历数组得到的是数组的下标,for of遍历数组得到的是数组的元素
  • D:for in遍历键 for of遍历值
总结:

1.for-in

  • 可以循环遍历对象,数组,字符串
  • 遍历对象 访问对象属性,
  • 遍历数组,访问数组索引号,
  • 遍历字符串,访问字符串索引号

2.for-of

  • 字符串和Map(集合,后面学习),
  • 不能遍历对象
  • 遍历数组,访问数组元素
  • 遍历字符串,访问字符串字符元素

访问对象的方法

  • 在JavaScript中,只能用“ . ”来访问对象的方法
function Person() {
            this.name = 'xioaming'
            this.age = 29
            this.say = function () {
                alert('Tihs is person')
            }
        }
        var student = new Person()
        alert(student.name)
        alert(student['age'])
        student.say() //使用 " . "访问对象方法