javascript字符串对象之字符串

字符串的定义：JavaScript 字符串用于存储和处理文本。

字符串可以是插入到引号中的任何字符。你可以使用单引号' ' 或双引号" " 或``。

访问字符串中的每个字符的方法：你可以使用索引位置来访问字符串中的每个字符。

字符串的索引从 0 开始，这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。

字符串中引号的使用方法：

你可以在字符串中使用引号，字符串中的引号不要与字符串的引号相同。

外双，内单。外单，内双。


        {
  // 字符串: ''   (存储文本信息)
  var s1 = 'hello javascript';
        console.log(s1);
        document.write(s1);
 
 
        // 字符串中可以写标签
        var s2 = 'hello javascript
';
        document.write(s2);
 
 
        var s3 = "小茗同学";
        document.write(s3);
 
 
        document.write('
');
 
 
        // 外双内单,外单内双
        var s4 = "小茗同学你好"
        document.write(s4);
 
        document.write('
');
 
        // 直接解析不了字符串，需要如下格式才能解析
        var name = '老李';
        var age = 22;
        var s5 = '你好,'+name+',你是猪！你已经'+age+'岁了！';
        document.write(s5);
 
 
        document.write('
');
 
        // 模板字符串中，可以直接解析变量，变量的写法是 ${变量名}
        var username = '老李头';
        var s6 = `你好，${username}`;
        document.write(s6);
        }

console输出效果如下：

例子：

// 例子：

// 向页面中输出10个li，每个li中输入的字是“我是第几个列表表项”
// 思路：
// 如果别人给你说一下子输出很多内容，或者一下子对很多内容进行操作，那么你一定要用到循环（遍历）


  {
    
            // for
 
            document.write('');
            for(var i=1;i<=10;i++){
                document.write(`<li>我是第${i}个列表项!</li>`);
                }
            document.write('

');

}

console输出效果如下：

字符串拼接的综合应用：


    <div id="box"></div>
    
 
    <script>
        // 抓取元素（获取元素）
        document.getElementById('box'); 
        console.log(box);
 
 
        // 数据
        var list = [
        {id:1,name:'张三',sex:'男',score:80},
            {id:2,name:'李四',sex:'女',score:81},
            {id:3,name:'王五',sex:'男',score:90},
            {id:4,name:'赵四',sex:'女',score:85},
            {id:5,name:'葛天',sex:'男',score:75},
            {id:6,name:'段玉',sex:'男',score:100},
            ]
 
            // 我想把这些数据，放置在表格中，呈现在页面中
            var  strHtml = `
            <table width="600" border="1">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>分数</th>
        </tr>
        `;
        // i 代表数组的索引（下标，下标是从0开始的）
        for(var i=0;i<=list.length-1;i++){
            strHtml += `
        <tr>
            <td>${list[i].id}</td>
            <td>${list[i].name}</td>
            <td>${list[i].sex}</td>
            <td>${list[i].score}</td>
        </tr>
        `;
        }
       
 
        strHtml += `</table>`;
        // 把拼接之后的字符串，放置在id名叫box的盒子里
 
        box.innerHTML = strHtml;
       
    </script>

预览效果

使用``模板字符串完成字符串拼接


     <div id="box"></div>
    
 
    
    <script>
        var box = document.getElementById('box');
        // 数据
 
        var list = [
            {id:1,name:'张三',sex:'男',score:80},
            {id:2,name:'李四',sex:'女',score:81},
            {id:3,name:'王五',sex:'男',score:90},
            {id:4,name:'赵四',sex:'女',score:85},
            {id:5,name:'葛天',sex:'男',score:75},
            {id:6,name:'段玉',sex:'男',score:100},
        ]
        var strHtml = ""
            +"
";
            for(var i=0; i<list.length;i++){
                console.log(list[i].name);
                console.log(list[i].score);
                console.log(list[i].sex);
 
 
                // 每遍历到一条信息的时候，我们让他出来一行
            // 你要把 每一条信息的各个数据，放置到各个单元格里面去。
            strHtml += "
";
            }
            strHtml += "
姓名 性别 分数
"+list[i].name+" "+list[i].sex+" "+list[i].score+"
";
            box.innerHTML = strHtml;
    </script>

预览效果

上面的链接是可以打开的

模板字符串，实现字符串的拼接，综合应用：


    <div id="box"></div>
    <script>
        var box = document.getElementById('box')
 
        // 定义数组
        list = [
            {id:1, text:'百度', url:'https://www.baidu.com'},
            {id:2, text:'网易', url:'https://www.163.com'},
            {id:3, text:'优酷', url:'https://www.youku.com'},
            {id:4, text:'爱奇艺', url:'https://www.iqiyi.com'},
            {id:5, text:'凤凰网', url:'https://www.ifeng.com'},
            {id:6, text:'搜狐', url:'https://www.sohu.com'},
        ]
        // 数组中的对象 获取的方式  数组名称[下标]
        // 对象中的属性 获取的方式  对象.属性
        // console.log(list[2])
 
        //  console.log(list)
 
 
        var strHtml = `<ul>`;
 
        // 遍历(逐一操作)
        for(var i=0; i<list.length; i++){
            console.log(list[i].text)
            console.log(list[i].url)
			
            // 在遍历的过程中向无序列表ul去放li列表项
            strHtml += `<li><a href="${list[i].url}" target="_blank" >${list[i].text}</a></li>`;
 
        }
 
        // 字符串的拼接
        strHtml += `</ul>`;
 
        box.innerHTML = strHtml
 
    </script>

预览效果

姓名	性别	分数
"+list[i].name+"	"+list[i].sex+"	"+list[i].score+"