如何检查当前URL是否包含多子串及优化Angular 6/TypeScript代码？

嘿，很高兴看到你已经注意到重复代码的问题——这绝对是写出可维护代码的好开端！针对你这段用Angular 6/TypeScript/ES6写的URL判断逻辑，我整理了几个实用的优化方案，帮你摆脱重复调用currentUrl.includes()的问题：

方案1：用数组+some()方法简化判断 #

最直接的优化就是把需要检测的子串统一放进一个数组，然后用数组的some()方法来一次性判断，这样就不用重复写currentUrl.includes()了：

const currentUrl = this.location.path();
const targetRoutes = ['/search-resources', '/calendar', '/yearbooks'];
const displayTile = targetRoutes.some(route => currentUrl.includes(route)) ? 1 : 2;

some()方法会遍历数组，只要有一个元素满足currentUrl.includes(route)的条件，就会返回true，完全能替代原来的多个或逻辑。后续要新增需要检测的路径，直接往数组里加就行，非常好维护。

方案2：抽离常量或工具函数提升复用性 #

如果这个判断逻辑在多个地方用到，或者你希望代码结构更清晰，可以把目标路径抽成常量，甚至封装成工具函数：

抽离为常量 #

// 可以放在组件的顶部，或者专门的常量文件里统一管理
const DISPLAY_TILE_1_ROUTES = ['/search-resources', '/calendar', '/yearbooks'];

// 组件内的逻辑
const currentUrl = this.location.path();
const displayTile = DISPLAY_TILE_1_ROUTES.some(route => currentUrl.includes(route)) ? 1 : 2;

封装成工具函数 #

如果判断逻辑后续可能变复杂，或者需要在多个组件复用，封装成函数更合适：

// 可以放在组件里，或者单独的工具类文件中
shouldDisplayFirstTile(url: string): boolean {
  const targetRoutes = ['/search-resources', '/calendar', '/yearbooks'];
  return targetRoutes.some(route => url.includes(route));
}

// 组件内调用
const currentUrl = this.location.path();
const displayTile = this.shouldDisplayFirstTile(currentUrl) ? 1 : 2;

这样代码可读性更强，后续修改判断逻辑只需要改函数内部就行，不用到处找重复的代码段。

额外小提示（Angular专属） #

如果你的场景是和路由强相关的，也可以考虑用ActivatedRoute来获取当前路由信息，而不是直接解析URL字符串。比如通过route.url或者route.snapshot来判断当前路由，不过这个要看你的具体业务场景，如果只是简单检测URL包含子串，前面的方案已经足够好用啦。

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