JS字符串

最新推荐文章于 2023-09-25 13:20:13 发布
最新推荐文章于 2023-09-25 13:20:13 发布
阅读量650 收藏 1
点赞数 1
分类专栏： Javascript 文章标签： javascript 前端 es
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y_ooo/article/details/122517940
版权
这篇博客详细介绍了JavaScript中字符串String的相关知识，包括声明定义（字面量与对象方法）、字符串转义符号、连接方法（如+、+=和模板字面量）、标签模板的使用以及一系列基本函数，如获取字符串长度、转换大小写、去除空格、截取和检索等操作。
摘要由CSDN通过智能技术生成
字符串String
1.字符串声明定义
（1）使用字面量（值类型）创建

返回类型是string

let yoo = "yooo.com";
console.log(typeof yoo);
console.log(yoo);
（2）使用对象方法（引用类型）创建

返回类型是object（使用值类型调用方法，js会在执行时将值类型转为对象）

let alison = new String("alison.com");
console.log(typeof alison);
console.log(alison.toString());

在这里插入图片描述

2.字符串转义符号

有些字符有双重含义，当想转变其含义时，在字符前加上转义符号\

（1）引号、斜杠… \" \\
// 引号 在字符前加\
let yoo = "\"yooo.com\"";
console.log(yoo);

let alison = "alison\\alison";
console.log(alison);
（2）制表符\t
// 制表符\t
let ruby = "ru\t\t\tby"
console.log(ruby);
（3）换行\n
// 换行\n
let andy = "an\ndy";
console.log(andy);

在这里插入图片描述

3.字符串连接
（1）使用连接运算符+、+=
let year = '2022';
let site = "yooo";
// 使用连接运算符
console.log(year + "的" + site + "一定会更爱自己");
（2）使用模板字面量``

包裹的字符串中可写入引入变量及表达式，支持换行操作

let year = '2022';
let site = "yooo";
// 使用模板字面量
console.log(`${year}的${site}
会发掘出
新的自我`);

在这里插入图片描述

模板字面量的嵌套使用

<body>
    <script>
        function show() {
            return "Yooo"
        }
        let hd = `${show()}酱油`;
        console.log(hd);

        // 模板字面量嵌套
        let lessons = [
            { title: '媒体查询响应式布局' },
            { title: 'FLEX弹性盒模型' },
            { title: 'GRID栅格系统' }
        ];
        function template() {
            return `<ul>${lessons.map((item) =>
                `<li>${item.title}</li>`)}
                </ul>`;
        }
        document.body.innerHTML = template();
    </script>
</body>

在这里插入图片描述

4.字符串标签模板

可以通过标签模板提取出模板字面量中的普通字符串和变量，再交给标签函数处理。

<body>
    <script>
        let name = 'Yooo';
        let nick = '酱油';
        console.log(tag`${name}的${nick}`);

        function tag(strings, name, nick) {
            console.log(name);
            console.log(nick);
            console.log(strings);
        }
    </script>
</body>

在这里插入图片描述

当变量很多时，标签函数的参数可以更改为**…vars**

<body>
    <script>
        let name = 'Yooo';
        let nick = '酱油';
        console.log(tag`${name}的${nick}`);

        //当变量很多时
        function tag(strings, ...vars) {
            console.log(vars);
            console.log(strings);
        }
    </script>
</body>

在这里插入图片描述

注意：普通字符串的数量永远>变量数

<body>
    <script>
        let name = 'Yooo';
        let nick = '酱油';

        // 字符串的数量永远大于变量
        console.log(tag`${name}`);

        // 当变量很多时
        function tag(strings, ...vars) {
            console.log(vars);
            console.log(strings);
        }
    </script>
</body>

在这里插入图片描述

例：将百度变为百度超链接

<body>
    <script>
        let lessons = [
            { title: "百度媒体查询响应式布局", author: "百度一下" },
            { title: "FLEX 弹性盒模型", author: "百度知道" },
            { title: "GRID 栅格系统百度教程", author: "没有百度" }
        ];

        function template() {
            return `<ul>${lessons.map((item) =>
                tag`<li>作者：${item.author} 标题：${item.title}</li>`)
                .join("")}
                </ul>`;
        }

        function tag(strings, ...vars) {
            return strings.map((str, key) => {
                return (str +
                    (vars[key] ? vars[key].replace("百度", `<a 	href="https://www.baidu.com">百度</a>`) : "")
                );
            }).join("");
        }

        document.body.innerHTML += template();
    </script>
</body>

在这里插入图片描述

5.字符串基本函数
（1）字符串长度&转成大小写
length toUpperCase() toLowerCase()
<body>
    <script>
        let name = "Yooo";
        // 字符串长度
        console.log(name.length);
        // 字符串都转成大写
        console.log(name.toUpperCase());
        // 字符串都转成小写
        console.log(name.toLowerCase());
    </script>
</body>

在这里插入图片描述

（2）字符串去掉前后空格
trim()
<body>
    <script>
        let dog = "     Alison";
        console.log(dog.length);
        // trim()去掉前后空格
        console.log(dog.trim().length);
    </script>
</body>

在这里插入图片描述

<body>
    <input type="text" name="password" />
    <script>
        let ps = document.querySelector("[name='password']");
        ps.addEventListener("keyup", function () {
            this.value = this.value.trim();
            console.log(this.value.length);
        })
    </script>
</body>

在这里插入图片描述

（3）取字符串第n个字符
charAt() []
<body>
    <input type="text" name="password" />
    <script>
        let puppy = 'Ruby';
        // 取字符串第n个字符
        console.log(puppy.charAt(0));
        console.log(puppy[0]);
    </script>
</body>

在这里插入图片描述

（4）字符串截取操作
slice() substr() substring()
let name = "alison";
// slice substr substring 
// 截取从n开始之后的字符
console.log(name.slice(1));
console.log(name.substr(1));
console.log(name.substring(1));

// slice substring截取从n开始到m之前的字符
// substr截取从n开始的m个字符
console.log(name.slice(1, 3));
console.log(name.substring(1, 3));
console.log(name.substr(1, 3));

// slice 截取从倒数第n个开始到倒数第m个之前的字符
// substr 截取从倒数第n个开始的m个字符
// substring 负数时按0算
console.log(name.slice(-3, -1));
console.log(name.substr(-3, 2));
console.log(name.substring(-3));

在这里插入图片描述

（5）检索字符串
indexOf() includes() lastIndexOf() startsWith() endsWith()
const name = "oalison";
// 查找o在字符串中的下标
console.log(name.indexOf('o'));
// 从第3个字符开始查找o
console.log(name.indexOf('o', 3));
// 从第5个字符开始查找o 找不到返回-1
console.log(name.indexOf('o', 5));
// 从第2个字符串开始查找是否包含o
console.log(name.includes('o', 2));

// 从右开始查找
console.log(name.lastIndexOf('o'));
// 从第3个字符向前查找
console.log(name.lastIndexOf('o', 3));
// 字符串是否以o开头
console.log(name.startsWith('o'));
// 字符串是否以o结尾
console.log(name.endsWith('o'));

在这里插入图片描述

const words = ['html', 'css', 'javascript'];
const string = "前端三件套：html、css、javascript";
const status = words.some((word) => {
    return string.includes(word);
})
if (status) {
    console.log("找到了关键词");
}

在这里插入图片描述

（6）字符串替换
replace()
const name = "Yooo.com";
console.log(name.replace("Yooo", "Alison"));

在这里插入图片描述

const words = ["html", "css", "js"];
const string = "前端三件套是html、css和js";
// 先将string传给pre，然后通过reduce循环遍历words数组直到遍历结束
const title = words.reduce((pre, word) => {
    return pre.replace(word, `<a href="?w=${word}">${word}</a>`);
}, string);
document.body.innerHTML += title;

在这里插入图片描述

（7）字符串重复
repeat()
console.log("*".repeat(3));

function phone(mobile, len = 3) {
    return String(mobile).slice(0, len * -1) +
        "*".repeat(len);
}
console.log(phone(98765432101, 5));

在这里插入图片描述

yooo*
关注
专栏目录
JavaScript 字符串乘法
01-19
原文地址：http://www.davidflanagan.com/2009/08/string-multipli.html原作者：David Flanagan在Ruby中，... 我刚刚发现在JavaScript中有个聪明的技巧来实现字符串的乘法： 代码如下: String.prototype.times = func
如何使用JavaScript将字符串转换为字符数组？
m0_66315247的博客
01-11 2831
如何使用JavaScript将字符串转换为字符数组？
JS 从字符串中提取出汉字、数字方法
聆听
05-11 4815
1、JS 从字符串中提取出汉字方法 var name = "这是AB一段CD文字" var reg = /[\u4e00-\u9fa5]/g; var names = name.match(reg); name = names.join(""); 2、JS 从字符串中提取出数值方法 var str = '大米:2.57斤/元,白菜:3.65元/斤'; var arr = str.match(/\d+(.\d+)?/g); // arr: ["2.75","3.65"] ...
js字符的相互转换
weixin_45512379的博客
08-21 388
1.toString()返回字符串，可以将数值转换成字符串。 <script> var a = 1234; var b = a.toString(); console.log(typeof b); </script> 结果： 2.如果需要获取数值的二进制，八进制，十六进制的字符串小时，则可以给 toString() 传递一...
JS 字符串及字符串方法
PSG_li的博客
02-21 424
JavaScript 字符串用于存储和操作文本。
JS 字符串转换成数字的三种方法
热门推荐
ljr_327的博客
03-29 7万+
JS 字符串转换成数字的三种方法
JS字符串和数组如何实现相互转化
10-15
在JavaScript中，字符串和数组之间的转化是常见的操作，特别是在处理数据和用户输入时。下面将详细阐述如何在JS中实现这两种类型之间的转换。 首先，我们要理解JavaScript中的字符串（String）和数组（Array）的...
JavaScript实现字符串与HTML格式相互转换
10-15
在Web开发中，JavaScript是一种常用的脚本语言，它在处理字符串和HTML之间的转换时起着至关重要的作用。字符串和HTML格式之间的转换是常见的需求，例如在用户输入数据时防止XSS（跨站脚本攻击）或在显示HTML内容时...
js字符串完全替换函数分享
10-25
在默认情况下，JavaScript字符串的replace方法只替换第一个找到的匹配项。为了替换字符串中所有匹配的项，可以使用正则表达式配合全局搜索标志“g”。 首先，让我们了解replace方法的基本用法。replace方法接受两个...
JS 第一讲（数据类型+运算符）
Cc200171的博客
05-02 577
1、代码规范 1.1 JS中的一切都区分大小写（变量名、函数名、操作符） 1.2 标识符（变量名，函数名，属性名，函数的参数）按下列规则组合 1.2.1 首字符必须是字母、下划线（_）或符号（$） 1.2.2 其他字符可以是字母，下划线（_）、符号$或数字 1.2.3 建议使用驼峰命名法 eg：testFunction 1,2,4 见名知意 1.3 注释 注释分为单行注释与块注释（块注释：/*代码*/ 单行注释：//） 1.4...
JS将数组里的字符串拼接成一个字符串
sakura的博客
11-22 3576
JS将数组里的字符串拼接成一个字符串 1. join( ) join() 方法用于把数组中的所有元素放入一个字符串。 元素是通过指定的分隔符进行分隔的。 用法：把数组中的所有元素放入一个字符串，默认以逗号分隔 let arr = ['xiaoyu', 'love', 'nega'] console.log(arr.join('-')) // 'xiaoyu-love-nega' 2. toString( ) let arr = ['xiaoyu', 'love', 'nega'] console.log(
JS 反引号``（模板字符串）用法
ksx2333的博客
04-08 4万+
JS 反引号``（模板字符串）用法。
js将字符串转换成数字与数字转为字符串
qq_48354174的博客
06-16 290
1.转换函数 parseInt() 函数可解析一个字符串，并返回一个整数。 如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。 var a = '123ab' var b = parseInt(a) console.log(b); //123 console.log(typeof b); //number parseFloat() 函数可解析一个字符串，并返回一个浮点数。 parseFloat("1234blu
JS字符串反转的几种方式
GY的博客
10-16 2万+
第一种： 字符串转数组，反转数组，数组转字符串。 split("")：根据空字符串拆分数组 reverse()：数组反转元素位置 join("")：数组转回字符串,且不带分隔符 let str = "hello world"; let newStr = str.split("").reverse().join(""); console.log(newStr); 实现效果如图： 第二种： 定义新的空字符串，遍历str，charAt()是取字符串的一个字符(charAt() 方法可返回指定位置的字符。)
在JavaScript中将字符串转换为数字的7种方法
最新发布
u011082575的博客
09-25 6967
原始地址：https://dev.to/sanchithasr/7-ways-to-convert-a-string-to-number-in-javascript-4l。console.log(Math.floor(str)) // 返回 1222。console.log(~~negStr) // 期望结果：-234。console.log(str * 1) // 期望结果：2344。// 返回 10.33。console.log(~~str) // 期望结果：1234。// 返回10.33。
PHP中可以用几种方式定义字符串,JS定义字符串（3种方式）
weixin_29887959的博客
03-10 351
在 JavaScript中，定义字符串有以下 3种方法。字符串直接量使用双引号或单引号包含任意长度的文本。示例1任何被引号包含的文本都被称为字符串型数据。var s = "true"; //把布尔值转换为字符串var s = "123"; //把数值转换为字符串var s = "[1,2,3]"; //把数组转换为字符串var s = "{x : 1; y : 2}"; //把对象转换...
JS字符串数据类型转化和分割的方法
cgh508802602的博客
07-25 2057
JS字符串数据类型转化和分割的方法 (详解）
JS字符串声明
wang_swa99er的博客
08-17 2971
JS字符串声明 字符串概念：所有带单引号或者双引号的都叫做字符串 字符串声明： 通过new运算符去声明 例： var str1 = new String(100); alert(str1 + 20);// 10020 alert(typeof str1);//object 对象 引用数据类型 省略new声明字符串 例： var str2 = String(100); alert(st
JavaScript字符串处理函数集锦
"这篇资源是关于JavaScript字符串操作的全面总结，包含了多种常见的字符串处理方法，如处理小数点、空格、数据类型验证、过滤特殊字符以及获取URL参数等实用功能。" 在JavaScript中，字符串是不可变的，这意味着对...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值