关于字符串

一.创建字符串

1.创建字符串也分为两种方式

    a.字面量方式
    b.构造函数方式

二.字符串操作

1.字符串有length属性->表示字符串长度,字符串中字符串个数
注:空字符也算一个字符

2.字符串是按照索引排列可以通过索引访问每一个字符字符值只能访问不能改变

在这里插入图片描述
3.for循环遍历字符串

4.字符串、数值、布尔值是一个包装数据类型

5.当使用时会自动转换成复杂数据类型,使用完自动转回基本数据类型

6.使用点语句 .toString()

三.字符串的常用方法

1.charAt(索引)
在这里插入图片描述
2.charCodeAt
在这里插入图片描述

3.indexOf & lastIdexIOf
在这里插入图片描述
4.substring
在这里插入图片描述
5.substr
在这里插入图片描述
6.replace

   是用于在字符串中,用一些字符替换另一些字符

在这里插入图片描述
7.splite

     分割字符串将分割后的字符存入数组返回


8.concat

连接两个字符串,返回链接之后的字符串

在这里插入图片描述

9.trim()
在这里插入图片描述
10.startsWith & endsWith

在这里插入图片描述
11.toLowerCase & toUpperCase
在这里插入图片描述
12.数组includes
在这里插入图片描述
下面展示一些 内联代码片

下面展示一些案例

        var str = 'hello'
        //01234 
        // var c1 = str.charAt(1)
        // console.log('c1 :',c1);

        var index = str.indexOf('l')
        console.log('index :', index);

        var lastIndex = str.lastIndexOf('l')
        console.log('lastIndex :', lastIndex);

        var sub1 = str.substring(1, 3)
        console.log('sub1 :', sub1);

        var sub2 = str.substring(1)
        console.log('sub2 :', sub2);

        //示例1 ?所在索引位置, 在使用substring截取
        var url = 'http://www.baidu.com?username=admin' //username=admin
        var index1 = url.indexOf('?')
        var sub3 = url.substring(index1 + 1)
        console.log('sub3 :', sub3);

        var sub4 = str.substr(1, 3)
        console.log('sub4 :', sub4);


        var str = "Visit Microsoft!"
        var sub5 = str.replace('Visit', "school")
        console.log('sub5 :', sub5); // school Microsoft!

        var str1 = 'javascript-html-css'
        var arr = str1.split('-')
        console.log('arr :', arr); // ['javascript', 'html', 'css']

        var str = 'hello'
        var newStr = str.concat('world')
        console.log('newStr ', newStr);


        var s1 = ' admin '
        console.log(s1.length, 's1 :', s1.trim().length);


        var url1 = 'http://www.baidu.com'
        var isOk = url1.startsWith('http')
        console.log('isOk :', isOk);

        var isOk1 = url1.endsWith('com')
        console.log('isOk1 :', isOk1);

        var s2 = 'hello'
        var str2 = s2.toUpperCase() // HELLO
        console.log('str2 ', str2);

        var s3 = 'HELLO'
        var str3 = s3.toLowerCase() // hello
        console.log('str3 ',str3);

        // if(str.toLowerCase() == 'hello'){
        // }

下面展示一些 内联代码片

以下展示一些案例

        /* 
          1. 反转字符串  abcdefg  => gfedcba

          2. 已知字符串 'abcefMMaveqeripMMaeererMMda'  替换大字MM为*号   'abcef**aveqerip**aeerer**da'

          3. 用javascript编程实现,字符串分割返回数组, 'html-css-javascript'=>['html','css','javascript']
        */

        /* 
           1. 反转字符串  abcdefg  => gfedcba
              思路: 从最一个字符串开始往前面遍历,将字符进行拼接 
                    
        */
        function reverseStr() {
            var str = 'abcdefg' // => 'gfedcba'
            //        0123456
            var newStr = ''

            var len = str.length //7
            for (var i = len - 1; i >= 0; i--) { //i:6,5
                var item = str.charAt(i) //item: g, f
                newStr = newStr + item // 'g'+'f' 'gf' 
            }
            console.log(newStr);
        }

        // reverseStr()
        /*
           var arr = [a,b,c,d,e,f,g]
           arr.reverse()
        */
        function reverseStrTwo() {
            var str = 'abcdefg' // => 'gfedcba'
            var arr = str.split('') //字符串->数组
            arr.reverse() //反转
            var newStr = arr.join('') //数组->字符串
            console.log(newStr);
        }

        // reverseStrTwo()

        /* 
           过滤敏感词
              ['xx','yy','MM']
              
             
           2. 已知字符串 'abcefMMaveqeripMMaeererMMda'  替换大字MM为*号   'abcef**aveqerip**aeerer**da'
           分析:   replace('MM','**')
            判断字符中没有某个字符
              str.indexOf('MM') == -1
        */
        function replaceStr() {
            
            //str.replace('MM', '**') // 'abcef**aveqeripMMaeererMMda'
            // newStr = newStr.replace('MM','**') //abcef**aveqerip**aeererMMda
            // newStr = newStr.replace('MM','**')
            
            var str = 'abcefMMaveqeripMMaeererMMda'
            while(str.indexOf('MM') != -1){
                str = str.replace('MM','**') //  'abcef**aveqerip**aeerer**da'
            }
            console.log(str);
        }

        // replaceStr()

        function replaceStrTwo(){
            var str = 'abcefMMaveqeripMMaeererMMda' // '[abcef, aveqerip, aeererMMda]'
            var arr = str.split('MM')
            var newStr = arr.join('**')
            console.log('newStr :',newStr);
        }

        replaceStrTwo()

四.模板字符串

1.在ES2015之前字符串拼接使用引号“”,但是在换行操作和输出变量值时很不方便

2.ES2015后字符串拼接使用反引号`(esc下面的那个键)引用变量名时可以使用${变量名}

在这里插入图片描述
下面展示一些 内联代码片


        // var s = 'world'
        // var str2 = `hello${s}`
        // console.log(str2);
        function strOne() {
            var a = 30
            var b = 20
            var c = a + b
            // var str = a + '+' + b + '=' + c // '10 + 20 = 30'
            var str = `${a}+${b}=${a+b}`
            console.log(str);
        }

        // var str = '<div>'+
        //              '<h2>标题</h2>'+
        //              '<p>模板字符串</p>'+
        //           '</div>'

        var title = '模板字符串标题'
        var str = `<div>
                     <h2>${title}</h2>
                     <p>模板字符串</p>
                   </div>
                   `
        // console.log(str);
        document.write(str)

3.模板字符串的应用

下面展示一些 内联代码片

模板字符串的应用案例
<style>
        .y-table,tr,td,th{
            width: 1200px;
            margin: 100px auto;
            border: 1px solid #ced0d3;
            border-collapse: collapse;
        }
        .y-table tr{
            line-height: 40px;
            text-align: center;
        }
        .y-table tr:hover{
            background-color: #f7f8fa;
        }
</style>

<body> 
       <!-- <table class="y-table">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>成绩</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>1001</td>
            <td>jack</td>
            <td>98</td>
            <td></td>
        </tr>
        <tr>
            <td>1002</td>
            <td>rose</td>
            <td>95</td>
            <td></td>
        </tr>
        <tr>
            <td>1003</td>
            <td>小丽</td>
            <td>85</td>
            <td></td>
        </tr>
        
    </table> -->


</body>
<srcipt>
       
        var students = [
                {number:1001, name:'jack', score:98,gender:'男'},
                {number:1002, name:'rose', score:95,gender:'女'},
                {number:1003, name:'小丽', score:85,gender:'女'},
                {number:1004, name:'小明', score:85,gender:'女'},
         ]

         var trStr = '<table class="y-table">'
         for(var i = 0; i<students.length; i++){
             var student = students[i] //学生对象
             trStr = trStr + `<tr>
                                <td>${student.number}</td>
                                <td>${student.name}</td>
                                <td>${student.score}</td>
                                <td>${student.gender}</td>
                            </tr>`
         }

         trStr = trStr + `</table>`

        //  console.log(trStr);
        document.write(trStr)
</srcipt>

五.ASCLL码

1.ascll码------as key
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
ascll码表-------128个

2.nuicode编码

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

3.GBK

1.汉字内码扩展规范
2.共收录了21003个汉字

六.严格模式

在这里插入图片描述
在这里插入图片描述
1.如何开启严格模式:
在这里插入图片描述

2.严格模式的规则

a.声明变量必须有 var 关键字
b.函数的形参不可以重复
c.声明式函数调用的时候函数内部没有 this

下面展示一些 内联代码片

开启严格模式

        'use strict'
        var num = 100
        // var num = 100
        console.log('num :',num);   

        function fn(p1,p2){
            console.log('p1 ',p1, 'p2',p2);
        }

        fn(10,20)

七.访问对象属性

1.for-in遍历对象循环
for-of循环遍历数组、字符串
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
2.访问对象的方法

在这里插入图片描述
在这里插入图片描述
判断一个字符串中出现最多的字符
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
练习:
在这里插入图片描述
在这里插入图片描述
下面展示一些 内联代码片

访问对象属性示例

        var numObj = {} //计数器对象
        var str = 'abcdefabcadefkmmkggcc' 
        //遍历取数每个字符
        for(var i = 0; i < str.length; i++){
            var item = str.charAt(i) // 获取字符  item: a 
            if(numObj[item]){
                numObj[item]++   // 如果计数器对象有 这个字符比如有a, a对应值加一
            }else{
                numObj[item] = 1 //没有这个字符 计数器对象添加一个字符属性,属性值设置为1  
            }
        }

        //打印计数器对象属性和值
        for(var key in numObj){
            console.log(key, ': ', numObj[key]);
        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值