Angular中Switch与if-else判断文件图标类型均返回错误值求助

错误分析 #

Switch语句问题 #

你写的switch case完全不符合语法规范：

• switch的case后面应该直接跟要匹配的具体值，而非表达式。
• 你写的case fileExtension === 'jpeg' || 'gif'...会先计算表达式结果：fileExtension === 'jpeg'是布尔值，而'gif'这类非空字符串在布尔语境下是true，所以整个表达式最终结果是true或false，但switch的匹配对象是fileExtension（字符串类型），永远不可能和布尔值匹配，因此必然进入default分支。

If-else语句问题 #

你的if条件写法存在逻辑错误：

• fileExtension === 'jpeg' || 'gif'等价于(fileExtension === 'jpeg') || ('gif')，由于非空字符串'gif'会被转为布尔值true，所以整个条件永远为true，不管fileExtension是什么，都会走到第一个if分支，返回picture。

修复后的代码 #

推荐用数组includes的方式简化多条件判断，代码更清晰易维护：

public getIcon(document: Document): string {
    const mimeType = document.fileType;
    const fileExtension = mimeType.split('.')[1];

    // 图片类型集合
    const imageExtensions = ['jpeg', 'gif', 'png', 'svg', 'xml', 'bmp', 'jpg', 'tif', 'tiff'];
    // 视频类型集合
    const videoExtensions = ['avi', 'mpg', 'wmv', 'mpeg', 'mp4', 'mov'];
    // 音频类型集合
    const audioExtensions = ['cda', 'mp3', 'mpa', 'wav', 'wma'];
    // 文档类型集合
    const docExtensions = ['pdf', 'ai', 'pptx'];

    if (imageExtensions.includes(fileExtension)) {
        return 'picture';
    } else if (videoExtensions.includes(fileExtension)) {
        return 'video-folder';
    } else if (audioExtensions.includes(fileExtension)) {
        return 'volume';
    } else if (docExtensions.includes(fileExtension)) {
        return 'article';
    } else {
        // 匹配docx、odt、rtf、txt、xml、xps等
        return 'file-text';
    }
}

如果一定要用switch语句，正确写法可以采用switch(true)的方式：

public getIcon(document: Document): string {
    const mimeType = document.fileType;
    const fileExtension = mimeType.split('.')[1];
    let iconType = 'file-text';

    switch(true) {
        case ['jpeg', 'gif', 'png', 'svg', 'xml', 'bmp', 'jpg', 'tif', 'tiff'].includes(fileExtension):
            iconType = 'picture';
            break;
        case ['avi', 'mpg', 'wmv', 'mpeg', 'mp4', 'mov'].includes(fileExtension):
            iconType = 'video-folder';
            break;
        case ['cda', 'mp3', 'mpa', 'wav', 'wma'].includes(fileExtension):
            iconType = 'volume';
            break;
        case ['pdf', 'ai', 'pptx'].includes(fileExtension):
            iconType = 'article';
            break;
        default:
            iconType = 'file-text';
    }
    return iconType;
}

额外提示 #

• 注意mimeType.split('.')[1]存在风险：如果fileType格式不是xxx.ext，会导致fileExtension为undefined，建议加判断处理这种异常情况。
• 可将扩展名集合抽成类外常量或单独配置文件，方便后续维护。

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