JS 第五讲（字符串操作）

最新推荐文章于 2022-08-16 19:53:03 发布

章鱼Cc_yoo

最新推荐文章于 2022-08-16 19:53:03 发布

阅读量222

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Cc200171/article/details/124614288

版权

字符串操作

str.length	获取长度
str.toUppercase()	转换为大写
str.toLlowercase()	转换为小写
str.split(参数x)	字符串的裁剪，返回一个数组，x：某种规则
str.indexof()	获取子元素的下标，如果不存在返回-1
str.substring(start,stop)	start必填项非负整数起始位置，stop必填项非负整数，返回start与stop之间的内容
str.substr(start,length)	返回start开始，指定length的内容
str.replace(x,y)	替换
字符串拼接 +
es6中使用$(变量名)在反引号中使用
转义字符	\n 换行
	\r 回车

例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>目录</title>
    <style>
    </style>
</head>
<body>
    <h1>前端班那点事</h1>
    <button onclick="zf()">正序/倒序</button>
    <aside>
        <ul></ul>
   </aside>
</body>
<script>
    // 数据源
    var arr = ["盒模型","浮动","定位","表单","响应式","弹性盒子","特效","动画","less/sass","网格","ES5"];
    // 获取ul
    var ul = document.getElementsByTagName("ul")[0];

    // 为ul添加内容
    function setUl() {
        // 先把ul置空
        ul.innerHTML = '';
        // 添加li
        var str = ''
        for (var i=0; i<arr.length; i++) {
            str += `<li>${arr[i]}</li>`;
        }
        ul.innerHTML = str;
    }
    // 执行
    setUl();
    // 反转数组
    // function myReverse(arr) {
    //     var newarr = [];
    //     for (var i=arr.length-1; i>=0; i--) {
    //         newarr.push(arr[i]);
    //     }
    //     return newarr;
    // }

    // 正序倒叙
    function zf() {
        // 反转数组
        arr = arr.reverse();
        // 重新设置ul
        setUl();
    }
</script>
</html>

例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>case02</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html {
            font-size: 62.5%;
        }
        body {
            text-align: center;
        }
        ul{
            width: 300px;
            margin: 0 auto;
        }
        li{
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid lightgray;
            font-size: 2.6rem;
            display: block;
        }
        li:nth-of-type(2n){
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="search">
        <button onclick="ss()">搜索</button>
    </div>
    <ul>
    </ul>
    <p id="total">共N条</p>
</body>
<script>
    var books = ["警世名言","红楼梦","百年孤独","老人与海","人生","平凡的世界","三国演义","遥远的救世主","钢铁是怎样炼成的","白夜行","魔鬼搭讪学","童年","白鹿原","孟子","解忧杂货铺","飘","嫌疑人X的献身","活着"];
 
    var ul = document.querySelector("ul");
    var iptSearch = document.getElementById("search");
    var pTotal = document.getElementById("total");

    // data是需要显示的数据
    function setUl(data) {
        ul.innerHTML = ``;
        pTotal.innerHTML = "共" + data.length + "条";
        for (var i=0; i<data.length; i++) {
            ul.innerHTML += `<li>${data[i]}</li>`;
        }
    }
    setUl(books);

    // 搜索
    function ss() {
        // 1.拿到需要搜索的数据  input.value
        var s = iptSearch.value;
        if (s === '') {
            // 显示数据源
            setUl(books);
            return;
        }
        // 2.与数据员进行比对，返回一个数组
        var arr = [];
        for (var i=0; i<books.length; i++) {
            // 检索子字符串
            if (books[i].indexOf(s) !== -1) {
                // 包含s内容
                arr.push(books[i]);
            }
        }
        // 3.显示新数组的内容
        setUl(arr);
    }
</script>
</html>

重点

1：反转字符串

var str = 'hello! My name is Lxj';

function reverseString(string) {

// 1. string ---> Array

// var array = string.split('');

// 2. 反转array

// array = array.reverse();

// 3. array ---> string

// var str = array.join('');

// return str;

return string.split('').reverse().join('');

}

console.log(reverseString(str))

2.判断是否是回文

function isHw(string) {

var string2 = reverseString(string);

return string === string2;

}

3.数组去重

var arr = [1,4,3,5,5,6,8,5,4,5,6,8,2,1,4,5,9,3,2];

function singleArray(array) {

var newArr = [];

for (var i=0; i<array.length; i++) {

// 判断新数组是否存在当前元素array[i]

if (newArr.indexOf(array[i])===-1) {

// 元素不存在

newArr.push(array[i]);

}

// newArr.indexOf(array[i]) === -1 && newArr.push(array[i])

}

return newArr;

}

console.log(singleArray(arr))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>case03</title>
</head>
<body>
    
</body>
<script>
    // 面试题1：反转字符串
    var str = 'hello! My name is Lxj';

    function reverseString(string) {
        // 1. string ---> Array
        // var array = string.split('');
        // 2. 反转array
        // array = array.reverse();
        // 3. array ---> string
        // var str = array.join('');
        // return str;

        return string.split('').reverse().join('');
    }

    console.log(reverseString(str))

    // 2.判断是否是回文
    function isHw(string) {
        var string2 = reverseString(string);
        return string === string2;
    }

    // 3.数组去重
    var arr = [1,4,3,5,5,6,8,5,4,5,6,8,2,1,4,5,9,3,2];
    function singleArray(array) {
        var newArr = [];
        for (var i=0; i<array.length; i++) {
            // 判断新数组是否存在当前元素array[i]
            if (newArr.indexOf(array[i])===-1) {
                // 元素不存在
                newArr.push(array[i]);
            }
            // newArr.indexOf(array[i]) === -1 && newArr.push(array[i])
        }
        return newArr;
    }
    console.log(singleArray(arr))
</script>
</html>

4.判断一个数是否是质数

function isPrime(n) {

if (n === 1) {

return true;

}

var is = true;

for (var i=2; i<n; i++) {

if (n % i === 0) {

// 说明有其他的约数

return false;

}

// 是个质数

return true;

}

2.字符串处理

var str = `name=LXJ&age=18&height=163&weight=90&male=0&hobby=play`;

// obj = {

// name: xxx,

// age: xxx,

// }

function str2Obj(string) {

// 1.转数组

var arr = string.split("&");

// 2.转obj

var obj = {};

for (var i=0; i<arr.length; i++) {

var arr2 = arr[i].split("=");

// arr2 = ["name","LXJ"]

var key = arr2[0];

var value = arr2[1];

obj[key] = value; // 动态添加属性值

}

return obj;

}

console.log(str2Obj(str))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>case04</title>
</head>
<body>
    
</body>
<script>
    // 1.判断一个数是否是质数
    function isPrime(n) {
        if (n === 1) {
            return true;
        }
        var is = true;
        for (var i=2; i<n; i++) {
            if (n % i === 0) {
                // 说明有其他的约数
                return false;
            }
        }
        // 是个质数
        return true;
    }


    // 2.字符串处理
    var str = `name=LXJ&age=18&height=163&weight=90&male=0&hobby=play`;
    // obj = {
    //     name: xxx,
    //     age: xxx,
    // }
    function str2Obj(string) {
        // 1.转数组
        var arr = string.split("&");
        // 2.转obj
        var obj = {};
        for (var i=0; i<arr.length; i++) {
            var arr2 = arr[i].split("=");
            // arr2 = ["name","LXJ"]
            var key = arr2[0];
            var value = arr2[1];
            obj[key] = value;    // 动态添加属性值
        }
        return obj;
    }
    console.log(str2Obj(str))
</script>
</html>

章鱼Cc_yoo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS 第五讲（字符串操作）

字符串操作str.length 获取长度 str.toUppercase() 转换为大写 str.toLlowercase() 转换为小写 str.split(参数x) 字符串的裁剪，返回一个数组，x：某种规则 str.indexof() 获取子元素的下标，如果不存在返回-1 str.substring(start,stop) start必填项非负整数起始位置，stop必填项非负整数，返回start与stop之间的内容 str.substr(.
复制链接

扫一扫