JS基础 基本类型
Posted wgchen~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS基础 基本类型相关的知识，希望对你有一定的参考价值。
阅读目录
类型检测
typeof
typeof 用于返回以下原始类型
- 基本类型：number/string/boolean
- function
- object
- undefined
可以使用 typeof 用于判断数据的类型
let a = 1;
console.log(typeof a); //number
let b = "1";
console.log(typeof b); //string
//未赋值或不存在的变量返回 undefined
var hd;
console.log(typeof hd);
function run()
console.log(typeof run); //function
let c = [1, 2, 3];
console.log(typeof c); //object
let d = name: "wgchen" ;
console.log(typeof d); //object
instanceof
instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
也可以理解为是否为某个对象的实例，typeof不能区分数组，但 instanceof 则可以。
let hd = [];
let wgchen = ;
console.log(hd instanceof Array); //true
console.log(wgchen instanceof Array); //false
let c = [1, 2, 3];
console.log(c instanceof Array); //true
let d = name: "wgchen" ;
console.log(d instanceof Object); //true
function User()
let hd = new User();
console.log(hd instanceof User); //true
值类型与对象
下面是使用字面量与对象方法创建字符串，返回的是不同类型。
let hd = "wgchen";
let cms = new String("willem");
console.log(typeof hd, typeof cms); //string object
只有对象才有方法使用，但在JS中也可以使用值类型调用方法，因为它会在执行时将值类型转为对象。
let hd = "wgchen";
let cms = new String("willem");
console.log(hd.length); // 6
console.log(cms.length); // 6
String
字符串类型是使用非常多的数据类型，也是相对简单的数据类型。
声明定义
使用对象形式创建字符串
let hd = new String('wgchen');
// 获取字符串长度
console.log(hd.length);
// 获取字符串
console.log(hd.toString());
字符串使用单、双引号包裹，单、双引号使用结果没有区别。
let content = 'wgchen';
console.log(content);
转义符号
有些字符有双层含义，需要使用 \\转义符号进行含义转换。
下例中引号为字符串边界符，如果输出引号时需要使用转义符号。
let content = 'wgchen \\'willem\\'';
console.log(content);
常用转义符号列表如下
| 符号 | 说明 |
|---|---|
| \\t | 制表符 tab缩进 |
| \\n | 换行 |
| \\\\ | 斜杠符号 |
| \\' | 单引号 |
| \\" | 双引号R |
var str = '输出 \\n 换行,\\n输出空格：xx\\bxx,\\n输出斜杠\\\\,\\n输出双引号\\"\\n输出单引号\\'\\n输出tab缩进：\\ttab缩进'
console.log(str)
连接运算符
使用 + 可以连接多个内容组合成字符串，经常用于组合输出内容使用。
let year = 2010,
name = 'wgchen';
console.log(name + '于' + year + '年');
使用 += 在字符串上追回字符内容
let web = 'wgchen';
web += '网址：wgchen.blog.csdn.net';
console.log(web); // wgchen网址：wgchen.blog.csdn.net
模板字面量
使用 `...` 符号包裹的字符串中可以写入变量与表达式
let url = 'wgchen.blog.csdn.net';
console.log(`wgchen网址是$url`); // wgchen网址是wgchen.blog.csdn.net
支持换行操作不会产生错误
let url = 'wgchen.blog.csdn.net';
document.write(`wgchen网址是：$url
大家可以在网站上学习到很多技术知识`);
使用表达式
function show(title)
return `wgchen`;
console.log(`$show()`)
模板字面量支持嵌套使用
let lessons = [
title: '媒体查询响应式布局',title: 'FLEX 弹性盒模型',title: 'GRID 栅格系统'
];
function template()
return `<ul>
$lessons.map((item)=>`
<li>$item.title</li>
`).join('')
</ul>`;
document.body.innerhtml = template();
标签模板
标签模板是提取出普通字符串与变量，交由标签函数处理
let lesson = 'css';
let web = 'wgchen';
tag `访问$web学习$lesson前端知识`;
function tag(strings, ...values)
console.log(strings); //["访问", "学习", "前端知识"]
console.log(values); // ["wgcehn", "css"]
下面例子将标题中有 wgchen 的使用标签模板加上链接
<script>
let lessons = [
title: "媒体查询wgchen响应式布局", author: "willem：" ,
title: "FLEX 弹性盒模型", author: "flex：" ,
title: "GRID 栅格系统wgchen", author: "grid："
];
function links(strings, ...vars)
return strings
.map((str, key) =>
return (
str +
(vars[key]
? vars[key].replace(
"wgchen",
`<a href="https://wgchen.blog.csdn.net">wgchen</a>`
)
: "")
);
)
.join("");
function template()
return `<ul>
$lessons
.map(item => links`<li>$item.author:$item.title</li>`)
.join("")
</ul>`;
document.body.innerHTML += template();
</script>
获取长度
使用 length 属性可以获取字符串长度
console.log("wgchen.blog.csdn.net".length)
大小写转换
将字符转换成大写格式
console.log('wgchen.blog.csdn.net'.toUpperCase()); // WGCHEN.BLOG.CSDN.NET
转字符为小写格式
console.log('WGCHEN.BLOG.CSDN.NET'.toLowerCase()); // wgchen.blog.csdn.net
移除空白
使用 trim 删除字符串左右的空白字符
let str = ' wgchen.blog.csdn.net ';
console.log(str.length);
console.log(str.trim().length);
使用 trimLeft 删除左边空白，使用 trimRight 删除右边空白
let name = ' wgchen.blog.csdn.net ';
console.log(name);
console.log(name.trimLeft());
console.log(name.trimRight());
获取单字符
根据从0开始的位置获取字符
console.log('wgchen'.charAt(3))
使用数字索引获取字符串
console.log('wgchen'[3])
截取字符串
使用 slice、substr、substring 函数都可以截取字符串。
slice、substring 第二个参数为截取的结束位置
substr 第二个参数指定获取字符数量
let hd = 'wgchen.blog.csdn.net';
console.log(hd.slice(3)); // hen.blog.csdn.net
console.log(hd.substr(3)); // hen.blog.csdn.net
console.log(hd.substring(3)); // hen.blog.csdn.net
console.log(hd.slice(3, 6)); // hen
console.log(hd.substring(3, 6)); // hen
console.log(hd.substring(3, 0)); // wgc 较小的做为起始位置
console.log(hd.substr(3, 6)); // hen.bl
console.log(hd.slice(3, -1)); // hen.blog.csdn.ne 第二个为负数表示从后面算的字符
console.log(hd.slice(-2));// et 从末尾取
console.log(hd.substring(3, -9)); // wgc 负数转为0
console.log(hd.substr(-3, 2)); // ne 从后面第三个开始取两个
查找字符串
indexOf
从开始获取字符串位置，检测不到时返回 -1
let hd = 'wgchen.blog.csdn.net';
console.log('wgchen.blog.csdn.net'.indexOf('e')); // 9
console.log('wgchen.blog.csdn.net'.indexOf('e', 5)); // 18 从第5个字符向后搜索
lastIndexOf
从结尾来搜索字符串位置
console.log('wgchen.blog.csdn.net'.lastIndexOf('e')); // 18
// 4 从第7个字符向前搜索
console.log('wgchen.blog.csdn.net'.lastIndexOf('e', 7));
search
search() 方法用于检索字符串中指定的子字符串，也可以使用正则表达式搜索
let str = 'wgchen.blog.csdn.net';
console.log(str.search("net"));
console.log(str.search(/\\.net/i));
includes
includes 字符串中是否包含指定的值，第二个参数指查找开始位置
console.log('wgchen.blog.csdn.net'.includes('e')); //true
console.log('wgchen.blog.csdn.net'.includes('g', 2)); //true
startsWith
startsWith 是否是指定位置开始，第二个参数为查找的开始位置。
console.log('wgchen.blog.csdn.net'.startsWith('w')); //true
console.log('wgchen.blog.csdn.net'.startsWith('g', 1)); //true
endsWith
endsWith 是否是指定位置结束，第二个参数为查找的结束位置。
console.log('wgchen.blog.csdn.net'.endsWith('net')); //true
console.log('wgchen.blog.csdn.net'.endsWith('e', 19)); //true
下面是查找关键词的示例
const words = ["php", "css"];
const title = "我爱在热爱学习php与css知识";
const status = words.some(word =>
return title.includes(word);
);
console.log(status); // true
替换字符串
replace
replace 方法用于字符串的替换操作
let str = 'wgchen.blog.csdn.net';
web = str.replace("wgchen", "willem");
console.log(web); // willem.blog.csdn.net
默认只替换一次，如果全局替换需要使用正则。
let str = "2023/02/12";
console.log(str.replace(/\\//g, "-")); // 2023-02-12
使用字符串替换来生成关键词链接
const word = ["php", "css"];
const string = "我喜欢学php与css知识";
const title = word.reduce((pre, word) =>
return pre.replace(word, `<a href="?w=$word">$word</a>`);
, string);
document.body.innerHTML += title;
使用正则表达式完成替换
/*正则表达式修饰符
/u 表示按unicode(utf-8)匹配（主要针对多字节比如汉字）
/g 全局匹配（全文查找出现的所有匹配字符，返回的结果可以是多个；如果不加/g最多只会匹配一个）
*/
let res = "wgchen.博客.csdn.net".replace("博客", str =>
return "blog";
);
console.log(res); // wgchen.blog.csdn.net
重复生成
下例是根据参数重复生成星号
function star(num = 3)
return '*'.repeat(num);
console.log(star());
下面是模糊后三位电话号码
let phone = "98765432101";
console.log(phone.slice(0, -3) + "*".repeat(3));
类型转换
分隔字母
let name = "wgchen";
console.log(name.split(""));
将字符串转换为数组
console.log("1,2,3".split(","以上是关于JS基础 基本类型的主要内容，如果未能解决你的问题，请参考以下文章