大家好！今天我们要化身JavaScript世界的"寿司大厨"，用slice()这把锋利的刀来精准切割类型字符串！🍣
一、先来认识我们的"食材"
还记得我们的"照妖镜"方法吗？
const typeString = Object.prototype.toString.call([]); // "[object Array]"
这个字符串就像一条完美的"三文鱼"，现在我们要学习如何把它切成各种形状！
二、slice(x,y)的"刀工"秘籍
slice(x,y)方法就像一把精准的寿司刀：
x：从哪里开始下刀（包含该位置）y：在哪里收刀（不包含该位置）
基础刀法演示
const magicString = "[object Array]";
// 完整保留
console.log(magicString.slice(0)); // "[object Array]"
console.log(magicString.slice(0, magicString.length)); // "[object Array]"
// 从第1个字符开始
console.log(magicString.slice(1)); // "object Array]"
// 从第8个字符开始到倒数第2个
console.log(magicString.slice(8, -1)); // "Array"
三、不同切法的效果对比
让我们用"[object Number]"这个字符串做实验：
const sample = "[object Number]";
// 1. 常规切法（获取类型）
console.log(sample.slice(8, -1)); // "Number"
// 2. 只切开头
console.log(sample.slice(8)); // "Number]"
// 3. 只切结尾
console.log(sample.slice(0, -1)); // "[object Number"
// 4. 反向切片（负数索引）
console.log(sample.slice(-7, -1)); // "Number"
// 5. 获取"object"这个词
console.log(sample.slice(1, 7)); // "object"
// 6. 获取方括号
console.log(sample.slice(0, 1)); // "["
console.log(sample.slice(-1)); // "]"
// 7. 奇葩切法（开始>结束）
console.log(sample.slice(5, 2)); // "" (返回空字符串)
四、实战切片实验室
让我们开个"切片实验室"，看看不同输入会得到什么结果：
实验1：处理Date类型
const dateStr = Object.prototype.toString.call(new Date()); // "[object Date]"
console.log(dateStr.slice(8, -1)); // "Date" ← 标准切法
console.log(dateStr.slice(1, 7)); // "object"
console.log(dateStr.slice(-5, -1)); // "Date"
console.log(dateStr.slice(8, 12)); // "Date" (因为"Date"正好4个字母)
实验2：处理RegExp类型
const regexStr = Object.prototype.toString.call(/abc/); // "[object RegExp]"
console.log(regexStr.slice(8, -1)); // "RegExp" ← 标准切法
console.log(regexStr.slice(-8, -1)); // "RegExp"
console.log(regexStr.slice(8, 14)); // "RegExp"
实验3：边界测试
const errStr = Object.prototype.toString.call(new Error()); // "[object Error]"
console.log(errStr.slice(8, 100)); // "Error]" (超出长度会自动截断)
console.log(errStr.slice(-100, 8)); // "[object " (负数超过长度视为0)
五、slice的趣味玩法
1. 密码解密游戏
const secret = "]galf[ecaps]llehs[";
console.log(secret.slice(10, -1).split("").reverse().join("")); // "shell"
console.log(secret.slice(1, 5).split("").reverse().join("")); // "flag"
2. 表情包生成器
const faces = "😀😃😄😁😆😅😂🤣";
console.log(faces.slice(2, 6)); // "😄😁" (每个emoji占2个代码单元)
3. 类型检测增强版
function superTypeOf(value) {
const prefix = Object.prototype.toString.call(value).slice(0, 8);
const type = Object.prototype.toString.call(value).slice(8, -1);
const suffix = Object.prototype.toString.call(value).slice(-1);
return `类型标识: ${prefix}${type}${suffix}\n纯类型: ${type}`;
}
console.log(superTypeOf([]));
// 类型标识: [object Array]
// 纯类型: Array
六、为什么是8和-1？
你可能好奇为什么常用slice(8, -1)：
[object正好是8个字符（包括左括号和空格）- 最后总有一个
]需要去掉 - 这样设计是为了保持一致性，所有类型输出格式相同
七、slice vs substring vs substr
顺便比较下其他"刀具"：
const str = "[object Boolean]";
// slice可以接受负数
console.log(str.slice(8, -1)); // "Boolean"
// substring不接受负数
console.log(str.substring(8, str.length-1)); // "Boolean"
// substr(已废弃)
console.log(str.substr(8, 7)); // "Boolean" (从8开始取7个字符)
八、总结表格
| 切片方式 | 示例输入 | 输出结果 | 说明 |
|---|---|---|---|
| slice(8, -1) | "[object String]" | "String" | 标准类型提取 |
| slice(1, 7) | "[object Number]" | "object" | 获取中间的"object" |
| slice(0, 1) | "[object Array]" | "[" | 获取开头的方括号 |
| slice(-1) | "[object Date]" | "]" | 获取末尾的方括号 |
| slice(-6, -1) | "[object Error]" | "Error" | 负数索引提取 |
| slice(8) | "[object RegExp]" | "RegExp]" | 从第8个字符到结尾 |
| slice(0, -1) | "[object Map]" | "[object Map" | 去掉最后一个字符 |
记住，slice()就像一把瑞士军刀，掌握它的用法能让你的字符串处理游刃有余！下次当你需要从"[object Xxx]"中提取类型时，就知道该怎么下刀啦！🔪
小测验：如果有一个字符串"[object Promise]"，如何用slice提取出"Promise"？欢迎在评论区展示你的"刀工"！
