后端【免费下载链接】TwigTwig, the flexible, fast, and secure template language for PHP项目地址https://gitcode.com/gh_mirrors/tw/Twig点击查看免费下载本文介绍 Twightml-extra包中的html_attr_type过滤器它把普通的 PHP 数组转换成实现了自定义渲染逻辑的属性值对象AttributeValueInterface让class、srcset、style这类有特殊分隔符规则的 HTML 属性能按语义正确地拼接与转义。读完本文你能掌握三种类型sst/cst/style的用法与适用场景、与html_attr/html_attr_merge的配合方式并能从源码层面理解其合并merge与省略omit机制用于生产级模板中安全、可组合地输出 HTML 属性。定位为特殊格式化规则的属性值提供类型标记html_attr_type过滤器自 Twig 3.24 引入见 CHANGELOG 中 3.24.0 条目 Add thehtml_attrfunction andhtml_attr_mergeas well ashtml_attr_typefilters的作用是把数组转换为专用属性值对象这些对象实现了自定义渲染逻辑。它专为配合 html_attr 函数 使用而设计用于那些属性值遵循特殊格式化规则的场景img {{ html_attr({ srcset: [small.jpg 480w, large.jpg 1200w]|html_attr_type(cst) }) }} {# 输出: img srcsetsmall.jpg 480w, large.jpg 1200w #} /code为什么需要这个过滤器因为html_attr对裸数组的默认处理是空格分隔见后文而srcset、sizes等属性要求逗号分隔style则要求声明串或属性-值对两种形态都可用。html_attr_type就是显式声明这个数组应该按哪种语法规则渲染的入口。前置条件安装 HtmlExtension该过滤器属于HtmlExtension不是 Twig 核心默认安装的。官方文档给出的安装步骤是$ composer require twig/html-extra在 Symfony 项目上再安装 twig/extra-bundle仓库内对应目录为 extra/twig-extra-bundle/以自动装配$ composer require twig/extra-bundle如果不是 Symfony 项目则需要手动把扩展注册到 Twig 环境use Twig\Extra\Html\HtmlExtension; $twig new \Twig\Environment(...); $twig-addExtension(new HtmlExtension());从源码看扩展的注册点非常直接HtmlExtension::getFilters() 返回了data_uri、html_attr_merge、html_attr_type三个过滤器getFunctions() 返回html_classes、html_cva、html_attr三个函数其中html_attr被标记为is_safe [html]且needs_environment true它需要环境来调用EscaperRuntime做转义。支持的三种类型空格分隔令牌列表sst用于期望空格分隔值的属性典型如class、aria-labelledby{% set classes [btn, btn-primary]|html_attr_type(sst) %} button {{ html_attr({class: classes}) }} Click me /button {# 输出: button classbtn btn-primaryClick me/button #}sst是默认类型当html_attr函数遇到一个数组值style属性除外时会自动按sst处理——无需显式调用html_attr_type(sst)。这一点在 HtmlExtension::htmlAttrValue() 中得到印证对于未实现AttributeValueInterface的可迭代值非style属性会直接包装为new SeparatedTokenList($value)其默认分隔符就是 。逗号分隔令牌列表cst用于期望逗号分隔值的属性典型如srcset、sizesimg {{ html_attr({ srcset: [image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x]|html_attr_type(cst), sizes: [(max-width: 600px) 100vw, 50vw]|html_attr_type(cst) }) }} {# 输出: img srcsetimage-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x sizes(max-width: 600px) 100vw, 50vw #} /code内联样式style用于style属性同时支持两种输入形态关联数组属性-值对和数字索引数组CSS 声明串{# 关联数组 #} {% set styles {color: red, font-size: 14px}|html_attr_type(style) %} div {{ html_attr({style: styles}) }} Styled content /div {# 输出: div stylecolor: red; font-size: 14px;Styled content/div #} {# 数字索引数组 #} {% set styles [color: red, font-size: 14px]|html_attr_type(style) %} div {{ html_attr({style: styles}) }} Styled content /div {# 输出: div stylecolor: red; font-size: 14px;Styled content/div #} /code与sst类似style类型对style属性是自动的html_attr遇到style属性的数组值时会在 htmlAttrValue() 中自动包装为new InlineStyle($value)。显式调用html_attr_type(style)主要用于提前定型、或在html_attr_merge场景中获得确定的合并语义。InlineStyle::getValue() 对两种形态的处理逻辑值得注意键为数字时把值原样当作声明串拼上;键为字符串时输出name: value;。并且只有null、false、true、空串、空数组会被跳过——0、0.0、0是合法的 CSS 值会正常输出CHANGELOG 3.29.0 条目 Fixhtml_attrdroppingstyledeclarations whose value is0,0.0or0 正是修复了这一边界。参数说明参数说明value要转换的属性值序列可迭代或标量type属性类型取值之一sst默认空格分隔令牌列表、cst逗号分隔令牌列表、style内联 CSS从 HtmlExtension::htmlAttrType() 的实现看该函数是一个静态工厂用match语句做类型分派public static function htmlAttrType(mixed $value, string $type sst): AttributeValueInterface { return match ($type) { sst new SeparatedTokenList($value, ), cst new SeparatedTokenList($value, , ), style new InlineStyle($value), default throw new RuntimeError(\sprintf(Unknown attribute type %s The only supported types are sst, cst and style., $type)), }; }两个实现要点sst与cst本质是同一个类SeparatedTokenList仅分隔符不同 与, 传入未知类型会在运行时抛出RuntimeError错误信息中明确列出支持的三种类型。渲染与合并源码级机制值对象接口html_attr_type的返回值统一实现 AttributeValueInterfaceinterface AttributeValueInterface { /** * Returns the string representation of the attribute value. The returned value * will automatically be escaped for the HTML attribute context. */ public function getValue(): ?string; }接口文档明确了两点契约返回的字符串会被自动按 HTML 属性上下文转义返回null表示整个属性应被省略。在 htmlAttr() 中每个属性值经htmlAttrValue()解析后最终通过$runtime-escape($value)EscaperRuntime输出属性名则使用html_attr_relaxed策略保留:、、[、]以兼容 Vue/React 等前端框架属性名。省略语义SeparatedTokenList::getValue() 的省略规则很精细列表中过滤掉null与false后若为空返回null属性被整体省略true值不打印文本但会让属性得以保留用于布尔属性语义。与 html_attr_merge 的合并协作sst/cst/style值对象同时实现了 MergeableInterface提供mergeInto()与appendFrom()两个方法用于在 html_attr_merge 过滤器 合并多个属性数组时的自定义合并行为SeparatedTokenList::mergeInto()仅当两侧同为SeparatedTokenList且分隔符相同时按序拼接一侧是普通可迭代值也可拼分隔符不同如sst与cst混用会抛出RuntimeError防止产生语义错误的输出InlineStyle::mergeInto()两侧均为InlineStyle或普通可迭代值时按序拼接声明。html_attr本身就可以接收多个属性数组内部先走htmlAttrMerge再渲染因此html_attr_type转换后的值可以直接参与多来源合并。仓库的集成测试 html_attr.test 验证了这一点merging a comma separated token list value with more array values: img {{ html_attr({ srcset: [small.jpg 480w]|html_attr_type(cst) }, { srcset: [medium.jpg 800w, large.jpg 1200w] }) }} /期望输出同一 fixture 第 40 行img srcsetsmall.jpg 480w, medium.jpg 800w, large.jpg 1200w /即已定型为cst的右侧数组与后续普通数组合并后仍保持逗号分隔渲染。与其他 HTML 辅助 API 的关系API类型职责html_attr函数函数合并并渲染整个属性字符串负责转义html_attr_type文档过滤器把数组定型为sst/cst/style值对象html_attr_merge文档过滤器显式合并多个属性数组尊重MergeableInterfacehtml_classes函数函数仅处理 class 字符串/条件数组html_cva函数函数构建 Cva 组件base/variants/compoundVariants输出 class 串需要注意的边界html_attr_type只负责值对象定型不输出最终 HTML真正的属性拼接、转义与省略判断由html_attr完成。此外HtmlExtension::htmlAttrValue() 还处理了若干与类型无关的细节BackedEnum取 backing value、aria-*布尔值转true/false字符串、data-*非标量值 JSON 编码Stringable除外、布尔true渲染为attrXHTML 合规的空值默认。这些行为与html_attr_type配合使用时不会冲突但了解它们有助于排查模板输出。小结html_attr_type是 Twig HTML 属性体系中的类型标记过滤器用一行管道声明数组应该按sst空格、cst逗号还是styleCSS 声明渲染。它的价值在于——把分隔符语义固化到值对象上使多来源属性合并html_attr多参数或html_attr_merge时仍保持正确的格式化与可预期的省略行为且全程由EscaperRuntime保证属性上下文转义。实现集中在 extra/html-extra/ 的 HtmlExtension 与 HtmlAttr/ 三个类中行为基线由 Tests/Fixtures/html_attr.test 等集成测试锁定可作为改造或二次开发时的权威参照。赞分享后端【免费下载链接】TwigTwig, the flexible, fast, and secure template language for PHP项目地址https://gitcode.com/gh_mirrors/tw/Twig点击查看免费下载相关推荐es-toolkit 的 toPairsIn 详解将对象含继承属性转换为键值对数组es toolkit 的 toPairsIn 详解将对象含继承属性转换为键值对数组 toPairsIn 是 es toolkit 提供的 Lodash 兼前端后端es-toolkit/compat 的 toPairsIn将对象含继承属性转换为键值对数组的兼容性方案es toolkit/compat 的 toPairsIn将对象含继承属性转换为键值对数组的兼容性方案 toPairsIn 是 es toolkit 的前端后端es-toolkit/compat 的 fromPairs 函数将键值对数组转换为对象es toolkit/compat 的 fromPairs 函数将键值对数组转换为对象 fromPairs 是 es toolkit 兼容层 es tool前端后端上一篇从卡顿到丝滑PrimeVue TreeSelect组件在10万级数据下的性能优化实战下一篇彻底解决PrimeVue TreeTable行选择与展开冲突的3个实战方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
