JavaScript路径转面包屑问题：如何获取各层级完整路径？

你的代码问题出在x的计算逻辑上：breadcrumbs[i].length是当前单个子目录的长度，而非从路径开头到当前子目录的总长度，导致每次截取的字符串长度错误。

修正后的代码 #

var path = "sub1/sub2/sub3";
var breadcrumbs = path.split('/');
for(var i = 0, l = breadcrumbs.length; i < l; i++) {
    // 截取前i+1个子项，拼接为完整路径
    var x = breadcrumbs.slice(0, i + 1).join('/');
    
    console.log(x);
}

代码说明 #

• breadcrumbs.slice(0, i + 1)：从数组开头截取到第i个元素（包含当前元素），比如当i=1时，会得到['sub1', 'sub2']。
• join('/')：将截取到的子项数组用/拼接，生成从根到当前项的完整路径，正好符合点击sub2时得到sub1/sub2的需求。

扩展处理（可选） #

如果路径包含首尾斜杠（比如"/sub1/sub2/sub3/"），可以先清理空项再处理：

var path = "/sub1/sub2/sub3/";
// 去除首尾斜杠并分割，避免生成空数组项
var breadcrumbs = path.trim().replace(/^\/|\/$/g, '').split('/');

if (breadcrumbs.length > 0) {
    for(var i = 0, l = breadcrumbs.length; i < l; i++) {
        var x = breadcrumbs.slice(0, i + 1).join('/');
        // 如需保留开头斜杠，可取消下面注释
        // x = '/' + x;
        console.log(x);
    }
} else {
    console.log('/');
}

内容的提问来源于stack exchange，提问作者charlie