TypeScript字符串字面量可选值导致空行的解决方法

原代码实现了将Building对象转为信息字符串，但当可选属性numberOfResidents为undefined时，输出会出现多余空行：

function mapBuildingToComment(building: Building) {
    return `
    ### Building information ###
    Street: ${building.address.street}
    HouseNumber: ${building.address.houseNumber}
    ${mapNumberOfResidents(building.numberOfResidents)}
    City: ${building.address.city}
    `
}

function mapNumberOfResidents(numberOfResidents?: string) {
    if (!numberOfResidents) return ''

    return `Number of residents: ${numberOfResidents}`
}

问题输出示例：

### Building information ###
    Street: Teststreet
    HouseNumber: 1

    City: Test

需要实现当numberOfResidents不存在时，City直接紧跟在HouseNumber下方，无空行。

方法1：让可选内容包含换行符 #

修改mapNumberOfResidents函数，当有值时返回带换行符的字符串，无值时返回空字符串。这样模板里的换行只会在有内容时才生效：

function mapBuildingToComment(building: Building) {
    return `
    ### Building information ###
    Street: ${building.address.street}
    HouseNumber: ${building.address.houseNumber}${mapNumberOfResidents(building.numberOfResidents)}
    City: ${building.address.city}
    `
}

function mapNumberOfResidents(numberOfResidents?: string) {
    if (!numberOfResidents) return ''

    return `\n    Number of residents: ${numberOfResidents}`
}

方法2：模板字符串内联条件判断 #

不需要额外函数，直接在模板里用三元运算符处理，把换行和内容绑定：

function mapBuildingToComment(building: Building) {
    return `
    ### Building information ###
    Street: ${building.address.street}
    HouseNumber: ${building.address.houseNumber}${building.numberOfResidents ? `\n    Number of residents: ${building.numberOfResidents}` : ''}
    City: ${building.address.city}
    `
}

方法3：用数组收集非空行后拼接 #

适合有多个可选字段的场景，先把所有需要显示的行放进数组，过滤空行后用换行符拼接，结构更清晰：

function mapBuildingToComment(building: Building) {
    const lines = [
        '    ### Building information ###',
        `    Street: ${building.address.street}`,
        `    HouseNumber: ${building.address.houseNumber}`,
        building.numberOfResidents ? `    Number of residents: ${building.numberOfResidents}` : '',
        `    City: ${building.address.city}`
    ].filter(line => line.trim() !== ''); // 过滤空行

    return lines.join('\n');
}

以上三种方法都能解决空行问题，当numberOfResidents为undefined时，输出会变成：

### Building information ###
    Street: Teststreet
    HouseNumber: 1
    City: Test

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